React 本机选择器在 Android 中看起来不错但在 ios 中很糟糕

Question

我使用 React Native 选择器来处理用户必须填写的三种不同的内容，以便向公司报告 his/her 时间。在 Android 上看起来一切都很好，您单击一个小字段，然后弹出选项，但在 ios 中它变成了一个巨大的字段，您可以在其中循环浏览选项。我认为这是一个常见问题，但似乎找不到人们如何使它看起来与 android 方式相似。

有人知道或以前做过吗？

Answer 1

或许，您可以根据平台指定不同的样式（Android - IOS）：

    import { Platform, Text, TouchableOpacity } from 'react-native';

    function SubmitBtn ({ onPress }) {
        return (
          <TouchableOpacity style={Platform.OS === 'ios' ? styles.iosSubmitBtn : styles.androidSubmitBtn} onPress={onPress}>
              <Text style={styles.submitBtnText}>Submit</Text>
          </TouchableOpacity>
        )
    }

const styles = StyleSheet.create({
    iosSubmitBtn: {
        backgroundColor: lightPurp,
        marginTop: 50,
        padding: 10,
        borderRadius: 7,
        height: 45,
        marginLeft: 20,
        marginRight: 20,
    },

    androidSubmitBtn: {
        backgroundColor: lightPurp,
        marginTop: 50,
        padding: 10,
        paddingLeft: 30,
        paddingRight: 30,
        height: 45,
        borderRadius: 2,
        marginLeft: 20,
        marginRight: 20,
        justifyContent: 'center',
        alignItems: 'center',
    },

    submitBtnText: {
        color: white,
        fontSize: 22,
        textAlign: 'center',
    },
});

React 本机选择器在 Android 中看起来不错但在 ios 中很糟糕

React native picker looks good in andriod but awful in ios

android

picker

ios

react-native