react-native - 如何在 React Native 中对齐标签和输入？

Question

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

我想不出正确的方法。

我的第一次尝试是使用 flexDirection: 'row' 创建一个顶 View ，然后是标签的第一个 subview ，然后是带有文本输入的第二个 subview 。这两个 View 有 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"的顶 View 和 subview 吗？

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

Answer 1

如果我没理解错的话，你是想创建一个 3 行 2 列的表结构吗？

这可以通过将 flexDirection 设置为“column”的顶 View 和将 flexDirection 设置为“row”的每一行的 subview 来实现:

<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',
  }
})