Question

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

我找不到正确的方法来正确地做到这一点。

我的第一个尝试是创建一个带有flexDirection的顶视图：“行”，然后是标签的第一个子视图，然后是带有文本输入的第二个子视图。这两个视图具有flexDirection：“列”和justifyContent：“之间的空间”。

视图：

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

还有StyleSheet

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

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

1 个答案: