如何在React Native中添加一个在两个平台上都可以使用的Picker

Question

我有一堆文字输入：

     <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中，我得到了一个选择器，其项目与其余文本框重叠，并且占用了大量空间。因此它破坏了所有布局。

我了解两个平台中与下拉列表相对应的本地组件是不同的。但是您如何处理呢？

我看过用React本机编写的AirBnB应用程序。在iOS中，单击相应字段时（包含“性别”字段），包含选择器的视图从底部开始滑动。它看起来像是文本输入，但不是，只会导致选择器显示。在Android中，它只是模态视图，带有单选按钮形式的项目。他们可能已经完成了很多额外的工作。

我需要根据平台显示选择器，还是有内置的方法来实现此目的？

Answer 1

您可以使用社区解决方案，例如

react-native-picker-select

或

react-native-picker-modal-view

或

react-native-picker

或者，您可以构建自己的解决方案，并根据需要执行任何操作，即可根据需要设置样式和位置，甚至可以为组件设置动画。