如何在 React Native 中关闭选择器？

Question

我正在使用 Native Base 选择器。我想手动关闭它，但找不到 API 为此。组件不包含任何方法或道具，如 visible.

我怎样才能 close/hide 选择器？

Answer 1

a): 你可以简单地基于 this.state.isPickerVisible 渲染它，或者 b): 将它包装在一个有可见属性

的 Modal 中

用于关闭选择器，如果您选择将其包装在模态框内，则让模态框占据整个屏幕并使用无反馈的 Touchable 来处理选择器外的点击：<TouchableWithoutFeedback onPress={() => this.cancelPressed()}> 按下取消的位置切换 isPickerVisible

{this.state.isPickerVisible && 
<Picker
  selectedValue={this.state.tempGender}
  onValueChange={tempGender => this.setState({tempGender})}
>
  <Picker.Item label="Female" value="female" />
  <Picker.Item label="Male" value="male" />
  <Picker.Item label="Other" value="other" />
</Picker>}

如果您选择将其包裹在模态框内，那么您可以获得一些动画选项

import {Modal, Picker ... etc...} from 'react-native'

    <Modal
      animationType="slide"
      transparent={true}
      visible={this.state.isPickerVisible}
    >
 <TouchableWithoutFeedback onPress={() => this.cancelPressed()}>
  <View>
    <Picker
      selectedValue={this.state.tempGender}
      onValueChange={tempGender => this.setState({tempGender})}
    >
      <Picker.Item label="Female" value="female" />
      <Picker.Item label="Male" value="male" />
      <Picker.Item label="Other" value="other" />
    </Picker>
  </View>
 </TouchableWithoutFeedback>
</Modal>

Answer 2

在 my 的情况下，使用带有 backAction 参数的 renderHeader 函数就足够了

<Picker
    renderHeader={backAction => (
        <Button onPress={() => {
            backAction();
            someFunction();
        }}
    )}
/>

如何在 React Native 中关闭选择器？

How to close picker in React Native?

react-native

native-base