Javascript - React native - как поместить TextInput и Text в одну строку - PullRequest
Новая
       41

Javascript - React native - как поместить TextInput и Text в одну строку

0 голосов
/ 25 сентября 2018

Я работаю над React native и Expo XDE на моем Android и хочу, чтобы эти тексты - «имя пользователя» и «пароль» были справа от их TextInputs (потому что я пишу на иврите), поэтомубудет в два ряда, а не на скриншоте ниже.Это код: 

  <View style={styles.container}>
 <Text > Travel </Text>

        {/* <View style={styles.row}>
      <View style={styles.inputWrap}> */}

        <Text> Username </Text>

        <TextInput
          style={styles.input}
          onChangeText={text => this.setState({ username: text })}
          value={this.state.username}
        />

          <Text> Password </Text>
       
        <TextInput
          style={styles.input}
          onChangeText={text => this.setState({ password: text })}
          value={this.state.password}
          secureTextEntry={true}
        />

Вот как это выглядит сейчас: главный экран с логином или регистрацией

Я попробовал эти коды стилей, но этоне сработало, на андроиде сильно испортился и все просто полетело: 

input: {
    height: 40,
    width: 180,
    borderColor: "gray",
    borderWidth: 1
  },

  inputWrap: {
    flex: 1,
    borderColor: "#cccccc",
    borderBottomWidth: 1,
    marginBottom: 10
  },

  row: {
    flex: 1,
    flexDirection: "row"
  }

Я также хочу создать заголовок "Путешествие" сверху, но у меня ничего не получалось после стольких раз, он остался прежним.

Можете ли вы помочь мне с этими вопросами?если нужно больше деталей, пожалуйста, скажите мне.Заранее спасибо.

1 Ответ

0 голосов
/ 25 сентября 2018

Вы должны обернуть ваши Text и TextInput в другое представление, направление гибкости которого является строкой и центрировано по вертикали.Этот код работает для меня. 

<View style={{flexDirection: 'column', flex: 1, backgroundColor: 'white', justifyContent: 'center', alignItems: 'center'}}>
    <Text style={{fontSize: 20}}>Travel</Text>
    <View style={{flexDirection: 'row', alignItems: 'center'}}>
      <Text style={{fontSize: 20}}>Username</Text>
      <TextInput style={{width: 200}}/>
    </View>
    <View style={{flexDirection: 'row', alignItems: 'center'}}>
      <Text style={{fontSize: 20}}>Password</Text>
      <TextInput style={{width: 200}}/>
    </View>
  </View>
...