Как выровнять метку и ввести в реагировать родную? - PullRequest
Новая
       36

Как выровнять метку и ввести в реагировать родную?

0 голосов
/ 12 декабря 2018

Я должен построить простую форму, где у меня есть 3 метки и 3 TextInput.Я хочу, чтобы они располагались друг над другом с пробелом между строками.

Я не могу найти правильный способ сделать это правильно.

Моя первая попытка - иметьВид сверху с помощью flexDirection: 'row', затем первое вспомогательное представление для меток, за которым следует второе вспомогательное представление с вводом текста.Эти два представления имеют 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",

      }
})

Результатне так плохо, но не идеально.

enter image description here

Преимущество, которое я вижу, состоит в том, что первый столбец автоматически масштабируется до наибольшей метки (не показано на рисунке выше), а второйстолбец принимает доступный размер.И это работает как в портретном, так и в ландшафтном режиме ...

Какой правильный способ сделать это?

Должен ли я иметь вид сверху с flexDirection: «столбец» и вспомогательные виды для каждогопара меток и текста?

В макете Android я бы использовал GridView для достижения того, чего я хочу.

1 Ответ

0 голосов
/ 13 декабря 2018

Если я правильно понял, вы пытаетесь создать структуру таблицы с 3 строками и 2 столбцами?

Это может быть достигнуто путем установки вида сверху с параметром flexDirection на «столбец» и дочерних видов для каждогострока со значением flexDirection, равным 'row': 

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