在 react-native 中为 ios 和 android 平台处理的常见事情是什么？

Question

我一开始一直在为 android 构建 react-native，但从未接触过 IOS，因为当时我没有使用 IOS 的项目，而且我没有 IOS 或 MacOS。 而且我对 IOS 和 Android 之间的区别一无所知。 我目前需要开发我的应用程序以供 Android 和 IOS 使用。

有哪些常见的事情需要处理？ 确切地说，检查平台。 从maestral-solutions ，它在样式表上显示标题高度和边距顶部：-

const styles = StyleSheet.create({
  header: {
    height: Platform.OS === 'android' ? 76 : 100,
    marginTop: Platform.OS === 'ios' ? 0 : 24,
    ...Platform.select({
      ios: { backgroundColor: '#f00', paddingTop: 24},
      android: { backgroundColor: '#00f'}
    }),
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    color: '#fff',
    fontSize: 24
  }
});

IOS平台还有其他常见的事情要处理吗？ 像状态栏或标签导航或图标？

Answer 1

您可以使用SafeAreaView而不是View进行换行。 例如：

render() {
  return (
    <SafeAreaView>
      <View style={{backgroundColor: 'red'}} />
    </SafeAreaView>
  );
}

如果您使用View包装，那么在您使用 iPhoneX 时标题将被剪切，因为 iPhoneX 与其他用户界面不同。

还有一些其他的东西在风格上有所不同。

在 iOS 中，您应该为borderRadius添加overflow: 'hidden' 。 意味着，您只能在 Android 中使用borderRadius但您可以在添加overflow: 'hidden'后看到圆形边框。 而且我认为backgroundColor可以在 Android 中的Text组件中使用，但不能在 iOS 中使用。 那么你应该关心 iOS 中的Alert.alert 。 在 Android 中，您通常可以同时使用 Alert 和 setState。 但是，如果您同时使用 Alert 和 setState，则警报会在显示后立即消失。 为了分解这个，你可以像这样使用。

setTimeout(() => {
  Alert.alert('info', 'Testing');
}, 100);
this.setState({spinner: false});

您可以检查这在 iOS 中也能正常工作。