605 lines
21 KiB
JavaScript
605 lines
21 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
* @flow
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
var React = require('react');
|
|
var ReactNative = require('react-native');
|
|
var {Image, StyleSheet, Text, View} = ReactNative;
|
|
var RNTesterBlock = require('./RNTesterBlock');
|
|
var RNTesterPage = require('./RNTesterPage');
|
|
|
|
class Entity extends React.Component<$FlowFixMeProps> {
|
|
render() {
|
|
return (
|
|
<Text style={{fontWeight: 'bold', color: '#527fe4'}}>
|
|
{this.props.children}
|
|
</Text>
|
|
);
|
|
}
|
|
}
|
|
|
|
class AttributeToggler extends React.Component<{}, $FlowFixMeState> {
|
|
state = {fontWeight: 'bold', fontSize: 15};
|
|
|
|
toggleWeight = () => {
|
|
this.setState({
|
|
fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold',
|
|
});
|
|
};
|
|
|
|
increaseSize = () => {
|
|
this.setState({
|
|
fontSize: this.state.fontSize + 1,
|
|
});
|
|
};
|
|
|
|
render() {
|
|
var curStyle = {
|
|
fontWeight: this.state.fontWeight,
|
|
fontSize: this.state.fontSize,
|
|
};
|
|
return (
|
|
<View>
|
|
<Text style={curStyle}>
|
|
Tap the controls below to change attributes.
|
|
</Text>
|
|
<Text>
|
|
<Text>
|
|
See how it will even work on{' '}
|
|
<Text style={curStyle}>this nested text</Text>
|
|
</Text>
|
|
</Text>
|
|
<Text>
|
|
<Text onPress={this.toggleWeight}>Toggle Weight</Text>
|
|
{' (with highlight onPress)'}
|
|
</Text>
|
|
<Text onPress={this.increaseSize} suppressHighlighting={true}>
|
|
Increase Size (suppressHighlighting true)
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
class TextExample extends React.Component<{}> {
|
|
static title = '<Text>';
|
|
static description = 'Base component for rendering styled text.';
|
|
|
|
render() {
|
|
return (
|
|
<RNTesterPage title="<Text>">
|
|
<RNTesterBlock title="Wrap">
|
|
<Text>
|
|
The text should wrap if it goes on multiple lines. See, this is
|
|
going to the next line.
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Padding">
|
|
<Text style={{padding: 10}}>
|
|
This text is indented by 10px padding on all sides.
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Font Family">
|
|
<Text style={{fontFamily: 'sans-serif'}}>Sans-Serif</Text>
|
|
<Text style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}>
|
|
Sans-Serif Bold
|
|
</Text>
|
|
<Text style={{fontFamily: 'serif'}}>Serif</Text>
|
|
<Text style={{fontFamily: 'serif', fontWeight: 'bold'}}>
|
|
Serif Bold
|
|
</Text>
|
|
<Text style={{fontFamily: 'monospace'}}>Monospace</Text>
|
|
<Text style={{fontFamily: 'monospace', fontWeight: 'bold'}}>
|
|
Monospace Bold (After 5.0)
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Android Material Design fonts">
|
|
<View style={{flexDirection: 'row', alignItems: 'flex-start'}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={{fontFamily: 'sans-serif'}}>Roboto Regular</Text>
|
|
<Text style={{fontFamily: 'sans-serif', fontStyle: 'italic'}}>
|
|
Roboto Italic
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}>
|
|
Roboto Bold
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontFamily: 'sans-serif',
|
|
fontStyle: 'italic',
|
|
fontWeight: 'bold',
|
|
}}>
|
|
Roboto Bold Italic
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif-light'}}>Roboto Light</Text>
|
|
<Text
|
|
style={{fontFamily: 'sans-serif-light', fontStyle: 'italic'}}>
|
|
Roboto Light Italic
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif-thin'}}>
|
|
Roboto Thin (After 4.2)
|
|
</Text>
|
|
<Text
|
|
style={{fontFamily: 'sans-serif-thin', fontStyle: 'italic'}}>
|
|
Roboto Thin Italic (After 4.2)
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif-condensed'}}>
|
|
Roboto Condensed
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontFamily: 'sans-serif-condensed',
|
|
fontStyle: 'italic',
|
|
}}>
|
|
Roboto Condensed Italic
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontFamily: 'sans-serif-condensed',
|
|
fontWeight: 'bold',
|
|
}}>
|
|
Roboto Condensed Bold
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontFamily: 'sans-serif-condensed',
|
|
fontStyle: 'italic',
|
|
fontWeight: 'bold',
|
|
}}>
|
|
Roboto Condensed Bold Italic
|
|
</Text>
|
|
<Text style={{fontFamily: 'sans-serif-medium'}}>
|
|
Roboto Medium (After 5.0)
|
|
</Text>
|
|
<Text
|
|
style={{fontFamily: 'sans-serif-medium', fontStyle: 'italic'}}>
|
|
Roboto Medium Italic (After 5.0)
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Custom Fonts">
|
|
<View style={{flexDirection: 'row', alignItems: 'flex-start'}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={{fontFamily: 'notoserif'}}>NotoSerif Regular</Text>
|
|
<Text
|
|
style={{
|
|
fontFamily: 'notoserif',
|
|
fontStyle: 'italic',
|
|
fontWeight: 'bold',
|
|
}}>
|
|
NotoSerif Bold Italic
|
|
</Text>
|
|
<Text style={{fontFamily: 'notoserif', fontStyle: 'italic'}}>
|
|
NotoSerif Italic (Missing Font file)
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</RNTesterBlock>
|
|
|
|
<RNTesterBlock title="Font Size">
|
|
<Text style={{fontSize: 23}}>Size 23</Text>
|
|
<Text style={{fontSize: 8}}>Size 8</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Color">
|
|
<Text style={{color: 'red'}}>Red color</Text>
|
|
<Text style={{color: 'blue'}}>Blue color</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Font Weight">
|
|
<Text style={{fontWeight: 'bold'}}>Move fast and be bold</Text>
|
|
<Text style={{fontWeight: 'normal'}}>Move fast and be bold</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Font Style">
|
|
<Text style={{fontStyle: 'italic'}}>Move fast and be bold</Text>
|
|
<Text style={{fontStyle: 'normal'}}>Move fast and be bold</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Font Style and Weight">
|
|
<Text style={{fontStyle: 'italic', fontWeight: 'bold'}}>
|
|
Move fast and be bold
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Text Decoration">
|
|
<Text style={{textDecorationLine: 'underline'}}>Solid underline</Text>
|
|
<Text style={{textDecorationLine: 'none'}}>None textDecoration</Text>
|
|
<Text
|
|
style={{
|
|
textDecorationLine: 'line-through',
|
|
textDecorationStyle: 'solid',
|
|
}}>
|
|
Solid line-through
|
|
</Text>
|
|
<Text style={{textDecorationLine: 'underline line-through'}}>
|
|
Both underline and line-through
|
|
</Text>
|
|
<Text>
|
|
Mixed text with{' '}
|
|
<Text style={{textDecorationLine: 'underline'}}>underline</Text> and{' '}
|
|
<Text style={{textDecorationLine: 'line-through'}}>
|
|
line-through
|
|
</Text>{' '}
|
|
text nodes
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Nested">
|
|
<Text onPress={() => console.log('1st')}>
|
|
(Normal text,
|
|
<Text style={{color: 'red', fontWeight: 'bold'}}>
|
|
(R)red
|
|
<Text style={{color: 'green', fontWeight: 'normal'}}>
|
|
(G)green
|
|
<Text style={{color: 'blue', fontWeight: 'bold'}}>
|
|
(B)blue
|
|
<Text style={{color: 'cyan', fontWeight: 'normal'}}>
|
|
(C)cyan
|
|
<Text style={{color: 'magenta', fontWeight: 'bold'}}>
|
|
(M)magenta
|
|
<Text style={{color: 'yellow', fontWeight: 'normal'}}>
|
|
(Y)yellow
|
|
<Text style={{color: 'black', fontWeight: 'bold'}}>
|
|
(K)black
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
<Text
|
|
style={{fontWeight: 'bold'}}
|
|
onPress={() => console.log('2nd')}>
|
|
(and bold
|
|
<Text
|
|
style={{fontStyle: 'italic', fontSize: 11, color: '#527fe4'}}
|
|
onPress={() => console.log('3rd')}>
|
|
(and tiny bold italic blue
|
|
<Text
|
|
style={{fontWeight: 'normal', fontStyle: 'normal'}}
|
|
onPress={() => console.log('4th')}>
|
|
(and tiny normal blue)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
<Text
|
|
style={{fontFamily: 'serif'}}
|
|
onPress={() => console.log('1st')}>
|
|
(Serif
|
|
<Text
|
|
style={{fontStyle: 'italic', fontWeight: 'bold'}}
|
|
onPress={() => console.log('2nd')}>
|
|
(Serif Bold Italic
|
|
<Text
|
|
style={{
|
|
fontFamily: 'monospace',
|
|
fontStyle: 'normal',
|
|
fontWeight: 'normal',
|
|
}}
|
|
onPress={() => console.log('3rd')}>
|
|
(Monospace Normal
|
|
<Text
|
|
style={{fontFamily: 'sans-serif', fontWeight: 'bold'}}
|
|
onPress={() => console.log('4th')}>
|
|
(Sans-Serif Bold
|
|
<Text
|
|
style={{fontWeight: 'normal'}}
|
|
onPress={() => console.log('5th')}>
|
|
(and Sans-Serif Normal)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
)
|
|
</Text>
|
|
<Text style={{fontSize: 12}}>
|
|
<Entity>Entity Name</Entity>
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Text Align">
|
|
<Text>auto (default) - english LTR</Text>
|
|
<Text>أحب اللغة العربية auto (default) - arabic RTL</Text>
|
|
<Text style={{textAlign: 'left'}}>
|
|
left left left left left left left left left left left left left
|
|
left left
|
|
</Text>
|
|
<Text style={{textAlign: 'center'}}>
|
|
center center center center center center center center center
|
|
center center
|
|
</Text>
|
|
<Text style={{textAlign: 'right'}}>
|
|
right right right right right right right right right right right
|
|
right right
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Unicode">
|
|
<View>
|
|
<View style={{flexDirection: 'row'}}>
|
|
<Text style={{backgroundColor: 'red'}}>
|
|
星际争霸是世界上最好的游戏。
|
|
</Text>
|
|
</View>
|
|
<View>
|
|
<Text style={{backgroundColor: 'red'}}>
|
|
星际争霸是世界上最好的游戏。
|
|
</Text>
|
|
</View>
|
|
<View style={{alignItems: 'center'}}>
|
|
<Text style={{backgroundColor: 'red'}}>
|
|
星际争霸是世界上最好的游戏。
|
|
</Text>
|
|
</View>
|
|
<View>
|
|
<Text style={{backgroundColor: 'red'}}>
|
|
星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。星际争霸是世界上最好的游戏。
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Spaces">
|
|
<Text>
|
|
A {'generated'} {'string'} and some spaces
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Line Height">
|
|
<Text style={{lineHeight: 35}}>
|
|
Holisticly formulate inexpensive ideas before best-of-breed
|
|
benefits. <Text style={{fontSize: 20}}>Continually</Text> expedite
|
|
magnetic potentialities rather than client-focused interfaces.
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Letter Spacing">
|
|
<View>
|
|
<Text style={{letterSpacing: 0}}>letterSpacing = 0</Text>
|
|
<Text style={{letterSpacing: 2, marginTop: 5}}>
|
|
letterSpacing = 2
|
|
</Text>
|
|
<Text style={{letterSpacing: 9, marginTop: 5}}>
|
|
letterSpacing = 9
|
|
</Text>
|
|
<View style={{flexDirection: 'row'}}>
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
letterSpacing: 2,
|
|
backgroundColor: 'fuchsia',
|
|
marginTop: 5,
|
|
}}>
|
|
With size and background color
|
|
</Text>
|
|
</View>
|
|
<Text style={{letterSpacing: -1, marginTop: 5}}>
|
|
letterSpacing = -1
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
letterSpacing: 3,
|
|
backgroundColor: '#dddddd',
|
|
marginTop: 5,
|
|
}}>
|
|
[letterSpacing = 3]
|
|
<Text style={{letterSpacing: 0, backgroundColor: '#bbbbbb'}}>
|
|
[Nested letterSpacing = 0]
|
|
</Text>
|
|
<Text style={{letterSpacing: 6, backgroundColor: '#eeeeee'}}>
|
|
[Nested letterSpacing = 6]
|
|
</Text>
|
|
</Text>
|
|
</View>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Empty Text">
|
|
<Text />
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Toggling Attributes">
|
|
<AttributeToggler />
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="backgroundColor attribute">
|
|
<Text style={{backgroundColor: '#ffaaaa'}}>
|
|
Red background,
|
|
<Text style={{backgroundColor: '#aaaaff'}}>
|
|
{' '}
|
|
blue background,
|
|
<Text>
|
|
{' '}
|
|
inherited blue background,
|
|
<Text style={{backgroundColor: '#aaffaa'}}>
|
|
{' '}
|
|
nested green background.
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
<Text style={{backgroundColor: 'rgba(100, 100, 100, 0.3)'}}>
|
|
Same alpha as background,
|
|
<Text>
|
|
Inherited alpha from background,
|
|
<Text style={{backgroundColor: 'rgba(100, 100, 100, 0.3)'}}>
|
|
Reapply alpha
|
|
</Text>
|
|
</Text>
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="containerBackgroundColor attribute">
|
|
<View style={{flexDirection: 'row', height: 85}}>
|
|
<View style={{backgroundColor: '#ffaaaa', width: 150}} />
|
|
<View style={{backgroundColor: '#aaaaff', width: 150}} />
|
|
</View>
|
|
<Text style={[styles.backgroundColorText, {top: -80}]}>
|
|
Default containerBackgroundColor (inherited) + backgroundColor wash
|
|
</Text>
|
|
<Text
|
|
style={[
|
|
styles.backgroundColorText,
|
|
{top: -70, backgroundColor: 'transparent'},
|
|
]}>
|
|
{"containerBackgroundColor: 'transparent' + backgroundColor wash"}
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="numberOfLines attribute">
|
|
<Text numberOfLines={1}>
|
|
Maximum of one line no matter now much I write here. If I keep
|
|
writing it{"'"}ll just truncate after one line
|
|
</Text>
|
|
<Text numberOfLines={2} style={{marginTop: 20}}>
|
|
Maximum of two lines no matter now much I write here. If I keep
|
|
writing it{"'"}ll just truncate after two lines
|
|
</Text>
|
|
<Text style={{marginTop: 20}}>
|
|
No maximum lines specified no matter now much I write here. If I
|
|
keep writing it{"'"}ll just keep going and going
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="selectable attribute">
|
|
<Text selectable>
|
|
This text is selectable if you click-and-hold, and will offer the
|
|
native Android selection menus.
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="selectionColor attribute">
|
|
<Text selectable selectionColor="orange">
|
|
This text will have a orange highlight on selection.
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Inline images">
|
|
<Text>
|
|
This text contains an inline image{' '}
|
|
<Image source={require('./flux.png')} />. Neat, huh?
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Text shadow">
|
|
<Text
|
|
style={{
|
|
fontSize: 20,
|
|
textShadowOffset: {width: 2, height: 2},
|
|
textShadowRadius: 1,
|
|
textShadowColor: '#00cccc',
|
|
}}>
|
|
Demo text shadow
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Ellipsize mode">
|
|
<Text numberOfLines={1}>
|
|
This very long text should be truncated with dots in the end.
|
|
</Text>
|
|
<Text ellipsizeMode="middle" numberOfLines={1}>
|
|
This very long text should be truncated with dots in the middle.
|
|
</Text>
|
|
<Text ellipsizeMode="head" numberOfLines={1}>
|
|
This very long text should be truncated with dots in the beginning.
|
|
</Text>
|
|
<Text ellipsizeMode="clip" numberOfLines={1}>
|
|
This very long text should be clipped and this will not be visible.
|
|
</Text>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock 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>
|
|
</RNTesterBlock>
|
|
<RNTesterBlock title="Text transform">
|
|
<Text style={{textTransform: 'uppercase'}}>
|
|
This text should be uppercased.
|
|
</Text>
|
|
<Text style={{textTransform: 'lowercase'}}>
|
|
This TEXT SHOULD be lowercased.
|
|
</Text>
|
|
<Text style={{textTransform: 'capitalize'}}>
|
|
This text should be CAPITALIZED.
|
|
</Text>
|
|
<Text style={{textTransform: 'capitalize'}}>
|
|
Mixed: <Text style={{textTransform: 'uppercase'}}>uppercase </Text>
|
|
<Text style={{textTransform: 'lowercase'}}>LoWeRcAsE </Text>
|
|
<Text style={{textTransform: 'capitalize'}}>
|
|
capitalize each word
|
|
</Text>
|
|
</Text>
|
|
<Text>
|
|
Should be "ABC":
|
|
<Text style={{textTransform: 'uppercase'}}>
|
|
a<Text>b</Text>c
|
|
</Text>
|
|
</Text>
|
|
<Text>
|
|
Should be "AbC":
|
|
<Text style={{textTransform: 'uppercase'}}>
|
|
a<Text style={{textTransform: 'none'}}>b</Text>c
|
|
</Text>
|
|
</Text>
|
|
<Text style={{textTransform: 'none'}}>
|
|
{
|
|
'.aa\tbb\t\tcc dd EE \r\nZZ I like to eat apples. \n中文éé 我喜欢吃苹果。awdawd '
|
|
}
|
|
</Text>
|
|
<Text style={{textTransform: 'uppercase'}}>
|
|
{
|
|
'.aa\tbb\t\tcc dd EE \r\nZZ I like to eat apples. \n中文éé 我喜欢吃苹果。awdawd '
|
|
}
|
|
</Text>
|
|
<Text style={{textTransform: 'lowercase'}}>
|
|
{
|
|
'.aa\tbb\t\tcc dd EE \r\nZZ I like to eat apples. \n中文éé 我喜欢吃苹果。awdawd '
|
|
}
|
|
</Text>
|
|
<Text style={{textTransform: 'capitalize'}}>
|
|
{
|
|
'.aa\tbb\t\tcc dd EE \r\nZZ I like to eat apples. \n中文éé 我喜欢吃苹果。awdawd '
|
|
}
|
|
</Text>
|
|
</RNTesterBlock>
|
|
</RNTesterPage>
|
|
);
|
|
}
|
|
}
|
|
|
|
var styles = StyleSheet.create({
|
|
backgroundColorText: {
|
|
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;
|