RN学习第七篇：Text

Text其实就是跟我们iOS中的label一样，就是写法不太一样，但是思路还是一样的，这里我们就来学习一下相关属性

中文文档

基本属性

名称	作用
color	字体颜色
fontFamily	字体名称
fontSize	字体大小
fontStyle	字体风格
fontWeight	字体粗细权重
lineHeight	行高
textAlign	文本对齐方法
textDecorationLine	横线位置
textShadowColor	阴影效果颜色
textShadowOffset	设置阴影效果

基本属性使用效果

2B7C6F2B-4286-468E-88B4-4C40C2A58797.png

代码

 render(){
        return(
            <View>
                <Text style={{color:'red',marginTop:50,marginLeft:50}}>
                    My Text One  红色。
                </Text>
                <Text style={{color:'green',fontSize:20}}> My Text Two 绿色和字体大小。</Text>
                <Text style={{color:'green',fontFamily:'Cochin'}}> My Text Three 绿色和字体名称。</Text>
                <Text style={{color:'pink',fontWeight:'bold'}}> My Text Four 粉色和加粗。</Text>
                <Text style={{color:'gray',fontStyle:'italic'}}> My Text Five 灰色和斜体。</Text>
                <Text style={{textAlign:'center',fontStyle:'italic'}}> My Text Six 居中和斜体。</Text>
                <Text numberOfLines={1} style={{textAlign:'center',fontStyle:'italic'}}>测试行数My Text Six 居中和斜体。My Text Six 居中和斜体。 My Text Six 居中和斜体。</Text>
                <Text style={{marginLeft:10,marginTop:50,textAlign:'center',fontStyle:'italic'}}>设置文本的间距,居左，居顶部50</Text>
                <Text numberOfLines={2} style={{lineHeight:50,textAlign:'center',fontStyle:'italic'}}>
                    测试行高 测试行高 测试行高 测试行高 测试行高 测试行高 测试行高 测试行高 测试行高 测试行高 测试行高
                    测试行高 测试行高 测试行高 测试行高 测试行高 测试行高
                </Text>

                <Text numberOfLines={2} style={{textAlign:'center',fontStyle:'italic',adjustsFontSizeToFit:true}}>
                    我是测试文本，我是测试文本，我是测试文本，我是测试文本，我是测试文本，我是测试文本，我是测试文本，我是测试文本，我是测试文本
                </Text>

            </View>
        );
    }

事件执行

Text主要执行三种事件

• onLongPress 当文本被长按以后调用此回调函数
• onPress 当文本被点击以后调用此回调函数。
• selectable 决定用户是否可以长按选择文本，以便复制和粘贴。
  代码

//注意 小写text会报错
 class text1 extends Component{
    render(){
        return(
           <View>
              <Text style={styles.welcome}
                    onPress={this.OnpressEvent}
                    onLongPress={this.onLongPressEvent}
                    selectable={this.selectableEvent}>
                  我是测试文本
              </Text>
           </View>
        );
    }


     OnpressEvent() {
        console.log('我是点击事件')
     }
     onLongPressEvent(){
         console.log('我是长按事件')
     }
     selectableEvent(){
         console.log('我是复制和粘贴事件')
     }
}



const styles = StyleSheet.create({

    welcome: {
        fontSize: 30,
        textAlign: 'center',
        backgroundColor:'gray',
        color:'red',
        marginTop:100,
        marginLeft:50,
        marginRight:50,
        height:50
    }
});

嵌套文本

在iOS当中，显示一个格式化文本的方法就是使用NSAttributedString,在rn中我们使用嵌套文本
效果图

A266B8DF-7235-4175-8FA5-8D8225CFF539.png

代码

//在iOS当中，显示一个格式化文本的方法就是使用NSAttributedString,在rn中我们使用嵌套文本
class text2 extends Component{
    render(){
        return(
            <View>
               <View style={styles1.view1}>
                   <Text style={{fontWeight: 'bold',fontSize:28}}>
                       测试
                       <Text style={{color: 'red'}}>
                           文本
                       </Text>
                   </Text>
               </View>

                <View style={styles1.view1}>
                    <Text>
                        <Text>One Test </Text>
                        <Text>Second Test</Text>
                    </Text>
                </View>

                <View style={styles1.view1}>
                    <Text>
                       我是测试文本
                        <Image source={require('./icon1.png')}/>
                    </Text>

                </View>

            </View>

        )
    }
}

const styles1 = StyleSheet.create({

    view1:{
       marginTop:50,
       marginLeft:50,
       marginRight:50,
       height:100,
        backgroundColor:'gray'
    }


})

参考代码