ReactNative开发——Text组件
Text组件用来显示一段字符串,在React Native开发中,所有需要显示的字符串都需要放置在Text组件或者有他派生出的TextInput组件中。
- Text内部的元素不在使用flexbox布局,而是采用文本布局。
基本属性
export default class Project07 extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}
numberOfLines={5} //设置显示多少行
>
Welcome to React Native!
{'\n\n'}
xxxxxxxxxxxxx
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
margin: 10,
fontSize: 20, //字体大小
fontFamily: 'Cochin', //字体,可以取值:scans-serif,serif,monospace .....
fontWeight: 'bold', // 字体的粗细,可以取值: normal,bold 100,200,300,....900
textAlign: 'auto', //决定的字符串如何排列,可以取值:left,right,center,auto,justify
fontStyle: 'italic', //字体风格,可以取值:normal,italic
textShadowColor:'red', //阴影颜色
textShadowOffset:{width:10,height:10},//阴影偏移
textShadowRadius:5,//阴影角度
padding:20,// 内间距
letterSpacing: 20,// ios 描述每个字符之间可以插入多少空间
writingDirection: 'rtl',//ios 书写方向,可以取值:auto,ltr,rtl
// ...
},
});
样式键设置
属性 | 值 |
---|---|
fontFamily | 字体 |
fontWeight | 字体的粗细,可以取值 bold,normal 100,200 ……900 |
textAlign | 决定字体的排列,auto,left right,center ,justify |
fontStyle | 字体的风格,italic,normal |
textShadowColor | 阴影颜色 |
textShadowOffset | 阴影偏移 |
textShadowRadius | 阴影角度 |
等等…. | 省略….. |
其他属性
属性 | 值 |
---|---|
numberFontScaling | 布尔类型,ios操作系统专用,表示显示的字体是否要根据为失能者的设置而改变 |
numberOfLines | 数值类型,表示Text组件中的字符串可以显示为多少行 |
onLayout | 布局完成的回调 |
onPress | 点击回调 |
Text组件的嵌套
当使用嵌套的Text组件时,子Text组件不能覆盖父组件继承而来的样式,只能增加父组件没有指定的样式,如果试图在代码中覆盖从父组件继承而来的样式,覆盖将不会生效,并且在开发模式下回弹出警告。
export default class Project07 extends Component {
render() {
return (
<Text
style={styles.parent}
>
我是Cochin字体
<Text style={styles.child}>
{'\n'} 我是20号的Cochin字体
</Text>
<Text>
{'\n'}当当当
</Text>
</Text>
);
}
}
const styles = StyleSheet.create({
parent: {
fontFamily: 'Cochin',
fontStyle: 'italic',
},
child: {
fontSize: 30,
fontStyle: 'normal'
},}
我在内部的那个Text中加入了{‘\n’}用来换行,因为是线性布局,如果不加的话,里面那个组件的内容将和外面的Text组件的内容显示子在同一行。
Text居中显示
因为Text是线性布局而非flex布局,所以要想让他的内容居中显示的话,解决办法就是在外面嵌套一个View,让Text本身在这个View中居中显示好了。
export default class Project07 extends Component {
render() {
return (
<View
style={styles.parent}
>
<View style={styles.view}>
<Text >
我是第一个文本
</Text>
</View>
<View style={styles.view}>
<Text>
我是第二个文本
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
parent: {
flex:1,
backgroundColor:'gray',
justifyContent:'center'
},
view:{
marginTop:10,
height:200,
backgroundColor :'orange',
justifyContent:'center',//让他内部的Text居中显示
alignItems:'center'
},
在Image中插入图片:
export default class Project07 extends Component {
render() {
return (
<Text>
这里将会出现一个图片,看:<Image source={require('./img/ic_launcher.png')}/>
</Text>
);
}
}