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

This is how its look now: the main screen with login or register

我尝试了这些样式代码，但没有成功，它在 android 上搞得一团糟，一切都飞了：

input: {
    height: 40,
    width: 180,
    borderColor: "gray",
    borderWidth: 1
  },

  inputWrap: {
    flex: 1,
    borderColor: "#cccccc",
    borderBottomWidth: 1,
    marginBottom: 10
  },

  row: {
    flex: 1,
    flexDirection: "row"
  }

我也想在顶部设计标题“Travel”，但我 这么多次都没有成功，还是一样。

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

Answer 1

您应该将 Text 和 TextInput 包装到另一个视图中，该视图的 flex 方向为行且垂直居中。这段代码对我有用。

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