项目中我们经常会遇到左右两端同时展示文本，并且一端要优先显示，另一端跟随变化。

实现的方法有很多种，下面简述下使用flex实现该效果。

效果如图：

 

通过视图结构层次，我们发现组件完全按照我们的意图显示。

视图结构：

 

 话不多说，直接上代码：

左边文本右端组件

<View style={style.item_top_bg}>
         <Text style={style.item_tab}>我是标题</Text>
                    {/* 展开收起 */}
            <TouchableOpacity style={style.item_top_btn} onPress={() => {
                        let open = this.state.openflag
                        this.setState({ openflag: !open })
             }}>
                        <Text style={style.item_top_right_title}>{this.showTitle()}</Text>
                        {this.showImg()}
             </TouchableOpacity>
 </View>

  item_top_bg: {
        borderRadius: 8,
        marginHorizontal: 10,
        marginBottom: 10,
        paddingHorizontal: 15,
        paddingVertical: 20,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
    },

    item_tab: {
        flex: 2,
        fontSize: DeviceHelp.fontSize(17),
        fontWeight: DeviceHelp.fontBold,
        color: '#3480FF',
    },

    item_top_btn: {
        alignItems: 'center',
        flexDirection: 'row',
    },

左边文本右边文本

                <View style={style.item_sub_bg}>
                    {/* 左右 */}
                    <View style={style.item_title_bg}>
                        <Text style={style.item_left}>左</Text>
                        <Text style={style.item_right}>右</Text>
                    </View>
                    {/* 分割线 */}
                    <View style={style.item_line}></View>
                    {/* 左右 */}
                    <View style={style.item_title_bg}>
                        <Text style={style.item_left}>我是左边</Text>
                        <Text style={style.item_right}>我是右边</Text>
                    </View>

                </View>

   item_sub_bg: {
        borderRadius: 5,
        borderWidth: 1,
        borderColor: '#B8D2FF5C',
        backgroundColor: '#FCFDFF',
        paddingHorizontal: 15,
        paddingVertical: 17,
    },

    item_title_bg: {
        alignItems: 'center',
        flexDirection: 'row',
    },

    item_left: {
        fontSize: DeviceHelp.fontSize(14),
        color: '#666666',
        flex: 2,
    },

    item_right: {
        fontSize: DeviceHelp.fontSize(14),
        color: '#333333',
    },

    item_line: {
        marginVertical: 17,
        height: 0.5,
        backgroundColor: '#EBEBEB',
    },