美文网首页
第5.60章:自定义Text组件

第5.60章:自定义Text组件

作者: 赵羽珩 | 来源:发表于2019-03-31 19:03 被阅读0次

    设定自定义的组件。然后你想让这些文字显示样式的时候,在单独的文件里,去定义这些文字组件,然后倒入你要使用的文件里

    image.png
    import React, {Component} from 'react';
    import {Platform, StyleSheet, Text, View} from 'react-native';
    
    export default class App extends Component {
      render() {
        return (
          <View style={styles.container}>
            <Ft26_333>
                ninghao.net
            </Ft26_333>
          </View>
        );
      }
    }
    
    class Ft26_333 extends Component {
      render() {
        return (
            <Text style={styles.title}>
              {this.props.children}
            </Text>
        )
      }
    }
    
    const styles = StyleSheet.create({
      title: {
        fontSize: 26,
        color: '#6435c9',
        textAlign: 'center',// 文字居中
        letterSpacing: 2,// 字与字间的距离
        fontWeight: '900',// 900最粗的文字、100最细的文字
      },
      container: {
        backgroundColor: '#eae7ff',
        flex: 1,
        margin: 50,
        borderWidth: 1,
        borderColor: '#6435c9',
        borderRadius: 16,
      },
    });
    

    相关文章

      网友评论

          本文标题:第5.60章:自定义Text组件

          本文链接:https://www.haomeiwen.com/subject/lwpubqtx.html