反应本机代码将整个文本复制到右侧

Question

现在它在左侧。如何将相同的文本复制到正确的位置 我如何设置按钮的样式，并使文本输入的样式更加丰富多彩，字体更大。

这里是我想要的例子：

这是我试过的

<View style={StyleSheet.row}>
  <Text>
    GAME 10
  </Text>
  <TextInput  placeholder="GAME 10" underlineColorAndroid='transparent' style={StyleSheet.TextInputStyleClass} />
</View>


<View style={StyleSheet.row}>
  <Text>
    TOTAL TEAM 1: 
  </Text>
  <TextInput 
    placeholder="TOTAL" 
    underlineColorAndroid='transparent' 
    style={StyleSheet.TextInputStyleClass} 
  />

</View>


<TouchableOpacity onPress={this._onButtonPress}>
<Text>ADD</Text>
</TouchableOpacity>

Answer 1

您可以将文本移动到组件中，然后只渲染组件两次：

export default class Text extends React.Component {
    render() {
        return (
            <View>
                <View style={StyleSheet.row}>
                    <Text>
                        GAME 10
                    </Text>
                    <TextInput  placeholder="GAME 10" underlineColorAndroid='transparent' style={StyleSheet.TextInputStyleClass} />
                </View>


                <View style={StyleSheet.row}>
                    <Text>
                        TOTAL TEAM 1:
                    </Text>
                    <TextInput
                        placeholder="TOTAL"
                        underlineColorAndroid='transparent'
                        style={StyleSheet.TextInputStyleClass}
                    />

                </View>


                <TouchableOpacity onPress={this._onButtonPress}>
                    <Text>ADD</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

class Parent extends React.Component {
    render() {
        return (
            <View>
                <View className="left">
                    <Text />
                </View>
                <View className="right">
                    <Text />
                </View>
            </View>
        )
    }
}