import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
ScrollView,
View,
} from 'react-native';
var Entity = React.createClass({
render() {
return (
<Text style={{fontWeight: "500", color: "#527fe4"}}>
{this.props.children}
</Text>
);
},
})
var AttributeToggler = React.createClass({
getInitialState() {
return {fontWeight: "bold", fontSize: 15};
},
toggleWeight() {
this.setState({
fontWeight: this.state.fontWeight === "bold" ? "normal" : "bold"
})
},
increaseSize() {
this.setState({
fontSize: this.state.fontSize + 5
})
},
render() {
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 style={{backgroundColor: "#ffaaaa", marginTop: 5}} onPress={this.toggleWeight}>
Toggle Weight
</Text>
<Text style={{backgroundColor: "#ffaaaa", marginTop: 5}} onPress={this.increaseSize}>Increase Size</Text>
</View>
)
},
})
class TestText extends Component {
render() {
return (
*?*ScrollView flexDirection="column" style={{top: 0}} contentContainerStyle={{paddingVertical: 20}} horizontal={false}>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>Wrap*?*/Text>
*?*Text>
The text should wrap if it goes on multiple lines. See, this is going to the next line.
*?*/Text>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>Padding*?*/Text>
*?*Text style={{padding: 10}}>
The text is indented by 10px padding on all sides.
*?*/Text>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>Font Family*?*/Text>
*?*Text style={{fontFamily: "Cochin"}}>
Cochin
*?*/Text>
*?*Text style={{fontFamily: "Cochin", fontWeight: "bold"}}>
Cochin Bold
*?*/Text>
*?*Text style={{fontFamily: "Helvetica"}}>
Helvetica
*?*/Text>
*?*Text style={{fontFamily: "Helvetica", fontWeight: "bold"}}>
Helvetica Bold
*?*/Text>
*?*Text style={{fontFamily: "Verdana"}}>
Verdana
*?*/Text>
*?*Text style={{fontFamily: "Verdana", fontWeight: "bold"}}>
Verdana Bold
*?*/Text>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>Font Size*?*/Text>
*?*Text style={{fontSize: 23}}>
Size 23
*?*/Text>
*?*Text style={{fontSize: 8}}>
Size 8
*?*/Text>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>Color*?*/Text>
*?*Text style={{color: "red"}}>
Red Color
*?*/Text>
*?*Text style={{color: "#3377cc"}}>
Color(rgb: "#3377cc")
*?*/Text>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>Font Weight*?*/Text>
*?*Text style={{fontSize: 20, fontWeight: "100"}}>
Move fast and be ultralight
*?*/Text>
*?*Text style={{fontSize: 20, fontWeight: "200"}}>
Move fast and be light
*?*/Text>
*?*Text style={{fontSize: 20, fontWeight: "normal"}}>
Move fast and be normal
*?*/Text>
*?*Text style={{fontSize: 20, fontWeight: "bold"}}>
Move fast and be bold
*?*/Text>
*?*Text style={{fontSize: 20, fontWeight: "900"}}>
Move fast and be ultrabold
*?*/Text>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>Font Style*?*/Text>
*?*Text style={{fontStyle: "normal"}}>
Normal text
*?*/Text>
*?*Text style={{fontStyle: "italic"}}>
Italic text
*?*/Text>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>Text Decoration*?*/Text>
*?*Text style={{textDecorationLine: "underline", textDecorationStyle: "solid"}}>
Solid underline
*?*/Text>
*?*Text style={{textDecorationLine: "underline", textDecorationStyle: "double", textDecorationColor: "#ff0000"}}>
Double underline with custom color(red color)
*?*/Text>
*?*Text style={{textDecorationLine: "underline", textDecorationStyle: "dashed", textDecorationColor: "#ff0000"}}>
Dashed underline with custom color(red color)
*?*/Text>
*?*Text style={{textDecorationLine: "none"}}>
None textDecoration
*?*/Text>
*?*Text style={{textDecorationLine: "line-through", textDecorationStyle: "solid"}}>
Solid line-through
*?*/Text>
*?*Text style={{textDecorationLine: "line-through", textDecorationStyle: "double", textDecorationColor: "#ff0000"}}>
Double line-through with custom color
*?*/Text>
*?*Text style={{textDecorationLine: "line-through", textDecorationStyle: "dashed", textDecorationColor: "#9cdc40"}}>
Dashed line-through with custom color
*?*/Text>
*?*Text style={{textDecorationLine: "line-through", textDecorationStyle: "dotted", textDecorationColor: "blue"}}>
Dotted line-through with blue color
*?*/Text>
*?*Text style={{textDecorationLine: "underline line-through"}}>
Both underline and line-through
*?*/Text>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>Nested*?*/Text>
*?*Text>
(Normal text,
*?*Text style={{fontWeight: "bold"}}>
(and bold
*?*Text style={{fontSize: 11, color: "#527fe4"}}>
(and tiny inherited bold blue)
*?*/Text>
)
*?*/Text>
)
*?*/Text>
*?*Text style={{opacity: 0.7}}>
(opacity
*?*Text>
(is inherited
*?*Text style={{backgroundColor: "#ffaaaa"}}>
(and also applies to the background)
*?*/Text>
)
*?*/Text>
)
*?*/Text>
*?*Text style={{fontSize: 12}}>
// 自定一控件
*?*Entity>Entity Name*?*/Entity>
*?*/Text>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>Text Align*?*/Text>
*?*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>
*?*Text style={{textAlign: 'justify'}}>
justify: this text component{"'"}s contents are laid out with "textAlign: justify"
and as you can see all of the lines except the last one span the
available width of the parent container.
*?*/Text>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>Letter Spacing*?*/Text>
*?*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>
*?*Text style={{letterSpacing: -1, marginTop: 5}}>
letterSpacing = -1
*?*/Text>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>Spaces*?*/Text>
*?*Text>
A {'generated'} {' '} {'string'} and some spaces
*?*/Text>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>Line Height*?*/Text>
*?*Text style={{lineHeight: 35}}>
A lot of space between the lines of this long passage that should
wrap once.
*?*/Text>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>Empty Text*?*/Text>
*?*Text />
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>Toggling Attributes*?*/Text>
*?*AttributeToggler />
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>backgroundColor attribute*?*/Text>
*?*Text style={{backgroundColor: 'yellow'}}>
Yellow container background,
*?*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>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>NumberOfLines attribute*?*/Text>
*?*Text numberOfLines={1}>
Maximum of one line, no matter how 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 how 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 how much I write here. If I keep writing, it{"'"}ll just keep going and going.
*?*/Text>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>Text Shadow*?*/Text>
*?*Text style={{fontSize: 20, textShadowOffset: {width: 2, height: 2}, textShadowRadius: 1, textShadowColor: '#00cccc'}}>
Demo text shadow
*?*/Text>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>This text contains an inline image*?*/Text>
*?*Text style={{fontSize: 40, fontWeight: "200"}}>
This text contains an inline image *?*Image source={require('./image/mm.jpg')} style={{width: 50, height: 20, resizeMode: 'cover'}}/>. Neat, huh?
*?*/Text>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>AllowFontScaling attribute*?*/Text>
*?*Text>
By default, text will respect Text Size accessibility setting on iOS.
It means that all font sizes will be increased or descreased depending on the value of Text Size setting in
{" "}*?*Text style={{fontWeight: 'bold'}}>Settings.app - Display & Brightness - Text Size*?*/Text>
*?*/Text>
*?*Text style={{marginTop: 10}}>
You can disable scaling for your Text component by passing {"\""}allowFontScaling={"{"}false{"}\""} prop.
*?*/Text>
*?*Text allowFontScaling={false} style={{marginTop: 20}}>
This text will not scale.
*?*/Text>
*?*/View>
*?*View style={{borderColor: "purple", borderWidth: 2}}>
*?*Text>Text highlighting (tap the link to see highlight)*?*/Text>
*?*Text>Lorem ipsum dolor sit amet, *?*Text suppressHighlighting={false} style={{backgroundColor: 'white', textDecorationLine: 'underline', color: 'blue'}} onPress={() => null}>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud*?*/Text> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.*?*/Text>
*?*/View>
*?*/ScrollView>
);
}
}
const styles = StyleSheet.create({
backgroundColorText: {
margin: 5,
marginBottom: 0,
backgroundColor: "rgba(100, 100, 100, 0.3)"
},
});
AppRegistry.registerComponent('rnDemo', () => TestText);
备注：*?* replace <
网友评论