Как добавить средство выбора в React Native, которое будет работать на обеих платформах - PullRequest
Новая
       70

Как добавить средство выбора в React Native, которое будет работать на обеих платформах

0 голосов
/ 20 октября 2019

У меня есть куча текстовых вводов: 

     <View style={styles.container}>
      <View style={styles.textBoxContainer}>
        <TextBoxMA
          style={styles.textBox}
          placeholder={Labels.USERNAME_PLACEHOLDER}
          value={userName}
          onChangeText={this.handleTextChange("userName")}
        />
      </View>
      <View style={styles.textBoxContainer}>
        <TextBoxMA
          style={styles.textBox}
          placeholder={Labels.EMAIL_PLACEHOLDER}
          value={email}
          onChangeText={this.handleTextChange("email")}
        />
      </View>

      //here I need to put a Picker, or select element in html terms

     </View>

Теперь, если я добавлю пикер вот так: 

     <View
      style={styles.textBoxContainer}>
      <Picker
        selectedValue={documentType}
        onValueChange={this.handleDocumentTypeChange}
      >
        <Picker.Item label="ID" value="1" />
        <Picker.Item label="Passport" value="212" />
      </Picker>
    </View>

Я получаю хороший, чистый сборщик в Android. Но в iOS у меня есть средство выбора, элементы которого пересекаются с остальными текстовыми полями, и оно занимает много места. Таким образом, он уничтожает все макеты.

Я понимаю, что нативные компоненты, соответствующие раскрывающемуся списку на двух платформах, различны. Но как вы справляетесь с этим?

Я взглянул на приложение AirBnB, написанное на React native. В iOS представление, содержащее средство выбора, скользит снизу при щелчке по соответствующему полю (например, поле «Пол». Оно похоже на текстовый ввод, но это не так. Оно просто вызывает отображение средства выбора). А в Android это просто модальное представление с элементами в форме переключателя. Вероятно, они проделали много дополнительной работы для достижения этой цели.

Нужно ли показывать средство выбора в зависимости от платформы или есть способ для этого?

1 Ответ

1 голос
/ 20 октября 2019

Вы можете использовать решения сообщества, такие как

act-native-picker-select

или

реагировать-native-picker-modal-view

Или

Сборщик реакций

Или вы можете создать собственное решение и делать все, что захотитеможет стилизовать, позиционировать и даже анимировать ваш компонент, как вам нравится.

...