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中，则使该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>

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

2 个答案: