2

我必须构建一个简单的表单，其中有 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 来实现我想要的。

4

1 回答 1

2

如果我理解正确，您是在尝试创建一个 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',
  }
})
于 2018-12-13T04:47:53.050 回答