[英]What is common thing to handle for ios and android platform in react-native?
我一開始一直在為 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平台還有其他常見的事情要處理嗎? 像狀態欄或標簽導航或圖標?
您可以使用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 中也能正常工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.