Question

我已经为android编写了大部分代码。其中一个组件包含一个选择器项，允许用户在两个不同的国家/地区之间进行选择。这个Android版本没有任何问题。但是，当我在IOS上尝试它时，它是不可用的。那是我意识到PickerIOS可用的时候。

我想做的是使用Platform来确定正在使用哪个操作系统，然后使用适当的选择器。例如

  <KeyboardAvoidingView style={styles.pickerView}
                        behavior={Platform.OS === 'ios' ? PickerIos: Picker}
                    >
                        <Picker>
                            <Picker.Item label='france' value='france'/>
                            <Picker.Item label='england' value='england'/>
                        </Picker>

                        <PickerIOS>
                            <PickerIOS.Item label='france' value='france'/>
                            <PickerIOS.Item label='england' value='england'/>
                        </PickerIOS>

                    </KeyboardAvoidingView>

我故意使用KeyboardAvoidingView，因为它是我知道使用'behavior'属性的少数几个组件之一。但是，我很确定我不能像现在这样离开它。如何确保使用正确的拣货员？

根据当前操作系统使用函数渲染选择器会更好吗？

Answer 1

您可以使用这样的平台特定选择器：---

const MyPicker = Platform.select({
    ios: PickerIOS,
    android: Picker
});

render() {
    return (
        <MyPicker>
            <MyPicker.Item label='france' value='france'/>
            <MyPicker.Item label='england' value='england'/>
        </MyPicker>
    );
}

Answer 2

我建议使用一个功能。例如，您可以执行以下操作：

<KeyboardAvoidingView style={styles.pickerView}
{this.choosePicker()}
</KeyboardAvoidingView>


choosePicker() {
    if (Platform.OS === 'ios') { 
        return (
            <PickerIOS>
                <PickerIOS.Item label='france' value='france'/>
                <PickerIOS.Item label='england' value='england'/>
            </PickerIOS>
        );
    } 
    // if Platform is not ios return other Picker
    return (
        <Picker>
            <Picker.Item label='france' value='france'/>
            <Picker.Item label='england' value='england'/>
        </Picker>
    );
}

如何使用Platform模块确保在React Native中使用正确的Picker版本

2 个答案: