【问题标题】:React native picker looks good in andriod but awful in iosReact 本机选择器在 android 中看起来不错,但在 ios 中很糟糕
【发布时间】:2017-12-04 12:04:52
【问题描述】:

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

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

【问题讨论】:

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

标签: android ios react-native picker


【解决方案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
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-03-03
相关资源
最近更新 更多