新建组件

在工程目录下添加一个 Classes 文件夹后，添加了一个 RadiusText.js 文件，并且写入如下代码：

'use strict';

import React, { Component } from 'react';
import {
    //样式组件
    StyleSheet,
    //文本组件
    Text,
    //视图组件
    View,
} from 'react-native';

class RadiusText extends Component {
    render() {
        return (
            <View style={styles.center}>
                <Text style={styles.texter}>
                    {this.props.children}
                </Text>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    center:{
        justifyContent:"center",
        alignItems:"center",
        width:30,
        height:30,
        borderRadius:15,
        borderWidth:2,
        backgroundColor:"orange",
        borderColor:"orange",
        margin:2
    },
    texter:{
        color :"white",
    },
});

module.exports = RadiusText;

导入使用：

import RadiusText from './Classes/RadiusText';