ReactNative开发——Text组件

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>
        );
    }
}

参考

http://reactnative.cn/docs/0.44/text.html#content