如何在本机反应中对齐标签和输入？

Question

我必须构建一个简单的表单，其中包含 3 个标签和 3 个 TextInput。我想让它们彼此叠放，行之间有一个空格。

我想不出正确的方法。

我的第一次尝试是创建一个带有 flexDirection: 'row' 的顶部视图，然后是标签的第一个子视图，然后是带有文本输入的第二个子视图。这两个视图有 flexDirection: "column" 和 justifyContent: "space between"。

意见：

<View style={[InitWindowStyles.root]}>
        <View style={InitWindowStyles.textBoxAndInputBox}>
          <Text>User Name</Text>
          <Text>Password</Text>
        </View>
        <View style={InitWindowStyles.textBoxAndInputBox}>
          <TextInput
            autoCorrect={false}
            onChangeText={this.onUserNameChange}
            value={this.state.userName}
            style={{ backgroundColor: 'white', borderColor: 'black' }}
          />
          <TextInput
            autoCorrect={false}
            onChangeText={this.onPasswordChange}
            value={this.state.password}
            style={{ backgroundColor: 'white', borderColor: 'black' }}
            secureTextEntry={true}
          />
        <View>
      <View>

风格：

const InitWindowStyles = StyleSheet.create({

    root: {
        flex: 1,
        flexDirection: "row"
      },
    textBoxAndInputBox: {
        flex: 1, 
        flexDirection: "column",
        justifyContent: "space-between",

      }
})

结果不是那么糟糕，但并不完美。

我看到的优点是第一列自动调整为最大标签的大小（上图中未显示），第二列采用可用大小。它可以在纵向和横向模式下使用...

正确的做法是什么？

我应该有一个带有 flexDirection:"column" 的顶视图和每对标签和文本的子视图吗？

在 Android 布局中，我会使用 GridView 来实现我想要的。

Answer 1

如果我理解正确，您是在尝试创建一个 3 行 2 列的表结构吗？

这可以通过将 flexDirection 设置为“列”的顶视图和将 flexDirection 设置为“行”的每一行的子视图来实现：

<View style={InitWindowStyles.root}>
  <View style={InitWindowStyles.rowContainer}>
    <Text style={InitWindowStyles.text}>User Name</Text>
    <TextInput
      autoCorrect={false}
      onChangeText={this.onUserNameChange}
      value={this.state.userName}
      style={InitWindowStyles.textInput}
    />
  </View>
  <View style={InitWindowStyles.rowContainer}>
    <Text style={InitWindowStyles.text}>Password</Text>
    <TextInput
      autoCorrect={false}
      onChangeText={this.onPasswordChange}
      value={this.state.password}
      style={InitWindowStyles.textInput}
      secureTextEntry={true}
    />
  </View>
  <View style={InitWindowStyles.rowContainer}>
    <Text style={InitWindowStyles.text}>Label 3</Text>
    <TextInput
      style={InitWindowStyles.textInput}
    />
  </View>
</View>

还有样式表

const InitWindowStyles = StyleSheet.create({
  root: {
    flex: 1,
    flexDirection: "column",
  },
  rowContainer: {
    flex: 1, 
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  text: {
    flex: 1
  },
  textInput: {
    flex: 1,
    backgroundColor: 'white', 
    borderColor: 'black',
  }
})