如何在不添加paddingLeft，react-native的margin左边和右边的值的情况下，将两个文本对齐为左对齐和居中

Question

如何设计一条带有两个文本的行，一个在前面，另一个在中间，如下所示

  <View style ={{flexDirection: 'row', flex:1,
        justifyContent: 'space-between',
        borderBottomLeftRadius: 0,
        borderBottomRightRadius:0,
        borderTopLeftRadius: 0,
        borderTopRightRadius: 0,
        borderTopWidth: 0,
        borderBottomWidth: 1,
        marginBottom:5,
        marginTop: 5,
        borderLeftWidth:0,
        borderColor:'grey',
        borderRightWidth:0,
    }}>
        <Text style ={{fontSize:14,marginBottom:5}}> NAME </Text>
        <TouchableOpacity>
          <View style = {{justifyContent: 'center', flex:1, alignItems: 'center'}}>
            <Text style = {{ fontSize: 14, textAlign:'center', marginBottom:5}}> 'SELECT' </Text>
          </View>
        </TouchableOpacity>
      </View>

Answer 1

仅将三个wrap与外部主view作为view，并根据需要向中间view提供flex的80%或其他内容，然后指定horizontal padding。

Answer 2

这里是使用Flex完全实现的东西。