Javascript - React native - 如何在同一行中放入 TextInput 和 Text

Question

我正在我的Android上开发React native和Expo XDE，我希望这些文本 - "用户名"和"密码"将位于其TextInputs的右侧(因为我用希伯来语编写(，因此它将在两行中，而不是在下面的屏幕截图中。 这是代码：

<View style={styles.container}>
<Text > Travel </Text>
{/* <View style={styles.row}>
<View style={styles.inputWrap}> */}
<Text> Username </Text>
<TextInput
style={styles.input}
onChangeText={text => this.setState({ username: text })}
value={this.state.username}
/>
<Text> Password </Text>

<TextInput
style={styles.input}
onChangeText={text => this.setState({ password: text })}
value={this.state.password}
secureTextEntry={true}
/>

这就是它现在的样子：带有登录或注册的主屏幕

我尝试过这些样式代码，但它不起作用，它在 android 上弄得一团糟，一切都飞了起来：

input: {
height: 40,
width: 180,
borderColor: "gray",
borderWidth: 1
},
inputWrap: {
flex: 1,
borderColor: "#cccccc",
borderBottomWidth: 1,
marginBottom: 10
},
row: {
flex: 1,
flexDirection: "row"
}

我也想在顶部设计标题"旅行"，但我 经过这么多次都没有成功，它保持不变。

你能帮我解决这些问题吗？ 如果需要更多详细信息，请告诉我。 提前谢谢。

Answer 1

您应该将文本和文本输入包装到另一个视图中，该视图的弹性方向为行且垂直居中。这段代码对我有用。

<View style={{flexDirection: 'column', flex: 1, backgroundColor: 'white', justifyContent: 'center', alignItems: 'center'}}>
<Text style={{fontSize: 20}}>Travel</Text>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Text style={{fontSize: 20}}>Username</Text>
<TextInput style={{width: 200}}/>
</View>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Text style={{fontSize: 20}}>Password</Text>
<TextInput style={{width: 200}}/>
</View>
</View>