第5.60章:自定义Text组件

2019-03-31  本文已影响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,
  },
});
上一篇下一篇

猜你喜欢

热点阅读