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

Posted 2023-02-25

【中文标题】React 本机选择器在 android 中看起来不错，但在 ios 中很糟糕

【英文标题】：React native picker looks good in andriod but awful in ios

【发布时间】：2017-12-04 12:04:52

【问题描述】：

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

任何人有任何想法或可能以前这样做过？

【问题讨论】：

你能发布一个屏幕截图或示例代码

【参考方案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',
    ,
);

【讨论】：

当问题是关于选择器时，为什么这是一个正确的答案？

是关于如何在两者中管理 ui 的一般示例：andriod - ios