【问题标题】: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>
)
}
}