在 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 中也能正常工作。