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

Question

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

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

  <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' 属性的组件之一。但是，我很确定我不能让它保持现在的样子。如何确保使用了正确的选择器？

根据当前OS使用一个函数来渲染选择器会不会更好？

Answer 1

我会推荐使用函数。例如，您可以执行以下操作：

<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>
    );
}

Answer 2

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

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

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