javascript - Javascript-React Native-如何在同一行中放置TextInput和Text

我正在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”，但我
 这么多次都没有成功，它保持不变。

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

最佳答案

您应该将Text和TextInput包装到另一个Flex方向为行且垂直居中的View中。该代码对我有用。

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