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

Question

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

如何关闭/隐藏选择器？

Answer 1

在我的情况下，使用renderHeader函数与backAction参数就足够了

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

Answer 2

a）：您可以根据this.state.isPickerVisible或b）简单地渲染它：将它包装在具有可见道具的Modal中

关闭Picker，如果你选择将它包装在Modal中，那么让模态占用整个屏幕并使用Touchable而不用反馈来处理Picker之外的点击：<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>}

如果您选择将其包装在Modal中，那么您可以获得一些动画选项

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>