【问题标题】:Whole text is copied to the right side in react native code整个文本在反应本机代码中复制到右侧
【发布时间】:2023-03-18 18:39:01
【问题描述】:

现在它在左侧。如何将相同的文本复制到右侧 以及如何设置按钮的样式并设置文本输入的样式更加丰富多彩和字体更大?

这是我想要的示例:

这是我尝试过的

<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>

【问题讨论】:

  • 请向我们展示你的努力

标签: javascript reactjs react-native


【解决方案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>
        )
    }
}

【讨论】:

  • 我现在确实喜欢,但无法运行
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2019-05-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-10-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多