react-native-picker,当点击选择器外部使,如何隐藏Picker

274 阅读1分钟

这个Picker库是国内大佬邢文亮造的,我觉得比react-native-community/picker好用多了。
in screen:

const [isPickerShow, setPickerShow] = useState(false);

const showPicker = () => {
    Picker.init({
        pickerData: [1,2,3,4,5],
        selectedValue: 3,
        onPickerConfirm: data => {
            console.log(data)
            hidePicker();
        },
        onPickerCancel: data => {
            console.log(data)
            hidePicker();
        },
    });
    Picker.show();
    setPickerShow(true);
};
 
 const hidePicker = () => {
    Picker.hide();
    setPickerShow(false);
 };


return(
    <View style={styles.container}>
         //...
        {isPickerShow ? (
                <TouchableWithoutFeedback onPress={() => hidePicker()}>
                    <View style={styles.mask} />
                </TouchableWithoutFeedback>
        ) : null}
    </View>
);

style:

import { StyleSheet, Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');
mask: {
    width,
    height,
    position: 'absolute',
    zIndex: 1,
},

其它解决方案,比如用Modal,可以参照这里的解决方案 What happened to showMask? #162