kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-23 11:57:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

<Text> Expose Android's includeFontPadding property to JavaScript.

Browse Source 
Summary:
By default Android will put extra space above text to allow for upper-case accents or other ascenders. With some fonts, this can make text look slightly misaligned when centered vertically.

We have found that the effect is very noticeable with certain custom fonts on Android. On iOS the font aligns vertically as expected.

Android exposes a property `includeFontPadding` that will remove this extra padding if set to false. This PR exposes that to JS, and adds it to the documentation and UIExplorer.
Closes https://github.com/facebook/react-native/pull/9323

Differential Revision: D4266713

Pulled By: lacker

fbshipit-source-id: f9711254bc26c09b4586a865f0e95ef4bf77cf3f
This commit is contained in:
Ben Clayton
2016-12-02 12:46:44 -08:00
committed by Facebook Github Bot
parent 9c5efa34fb
commit 833961e05d
3 changed files with 37 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
Examples/UIExplorer/js/TextExample.android.js
View File

@@ -411,6 +411,23 @@ class TextExample extends React.Component {
This very long text should be truncated with dots in the beginning.
</Text>
</UIExplorerBlock>
<UIExplorerBlock title="Include Font Padding">
<View style={{flexDirection: 'row', justifyContent: 'space-around', marginBottom: 10}}>
<View style={{alignItems: 'center'}}>
<Text style={styles.includeFontPaddingText}>
Ey
</Text>
<Text>Default</Text>
</View>
<View style={{alignItems: 'center'}}>
<Text style={[styles.includeFontPaddingText, {includeFontPadding: false, marginLeft: 10}]}>
Ey
</Text>
<Text>includeFontPadding: false</Text>
</View>
</View>
<Text>By default Android will put extra space above text to allow for upper-case accents or other ascenders. With some fonts, this can make text look slightly misaligned when centered vertically.</Text>
</UIExplorerBlock>
</UIExplorerPage>
);
}
@@ -421,6 +438,14 @@ var styles = StyleSheet.create({
left: 5,
backgroundColor: 'rgba(100, 100, 100, 0.3)'
},
includeFontPaddingText: {
fontSize: 120,
fontFamily: 'sans-serif',
backgroundColor: '#EEEEEE',
color: '#000000',
textAlignVertical: 'center',
alignSelf: 'center',
}
});
module.exports = TextExample;