記錄一些工作中遇到的兼容性問題：https://github.com/aijason/react-native-platform-compatibility-issues
Android
1、如果無設置具體寬度，部分安卓手機會出現文字超出容器情況。
lgNormalText: {
flex: 1,
flexWrap: 'wrap',
fontSize: S(28),
}
解決方法：
給Text或Text容器設置具體寬度，不能使用flex：1
lgNormalText: {
width: S(508),
flexWrap: 'wrap',
fontSize: S(28),
}
2、安卓上圖片地址無改變時，圖片不會刷新。
解決方法：
- 後臺返回新圖片地址需是唯一的
- 前端給圖片地址參數加上時間戳
const newImageUri = https://www.image.com?a=b×tamp=${new Date().getTime()}
3、官方Switch組件新trackColor屬性在部分安卓無效
<Switch
onValueChange={onChange}
value={isChecked}
style={styles.switchStyle}
onTintColor={ButtonColor.SWITCH_BACKGROUND_GREEN} // 忽略警告使用trackColor替換，在安卓無效，暫不替換。
/>
解決方法：使用onTintColor屬性
4、TextInput在安卓上默認有padding，IOS沒有
解決方法：安卓上手動將TextInput的padding設置爲0
5、在render函數中渲染沉浸式狀態欄時，在安卓上總是被原生的狀態欄樣式渲染覆蓋
<SafeAreaContainer>
<KsNavigation navigation={this.props.navigation} navigationTitle={'通知'} />
<StatusBar hidden={false} backgroundColor={'#fff'} />
</SafeAreaContainer>
解決方法：在組件聲明週期componentDidMount中使用StatusBar方法改變狀態欄
componentDidMount() {
StatusBar.setTranslucent(true);
StatusBar.setBackgroundColor('transparent');
StatusBar.setBarStyle('light-content');
}
6、WebView加載本地靜態HTML文件時，需要加上baseUrl: ''，否則部分安卓機型會出現文字亂碼
<WebView
source={{ html: pointsProductInfo.appIntroduce, baseUrl: '' }}
/>
7、人民幣符號明文使用‘¥’，在部分安卓機型展示會有問題
<Text>¥</Text>
解決方法：
<Text>¥</Text>
8、Android鍵盤會把底部的元素頂上去,如下，KsButton會被頂上去
解決方法：Keyboard監聽鍵盤顯示/隱藏，動態控制KsButton的隱藏/顯示
<View>
<FlatList data={data} renderItem={this.renderItem} />
<KsButton text="保存" onPress={this.onPress} />
</View>
if (isAndroid) {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {});
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {});
}
9、ES6、ES7...等js原生提供的方法，在不同的機型不同版本上支持不同，如flat在iOS12以下不支持，會造成閃退
解決方法：
-
在Can I use上查詢是否支持使用
-
若有兼容性問題，可使用lodash提供的方法替換
10、Image組件在設置了resizeMode後設置borderRadius在android上無效
<Image
source={image.icon}
style={{ borderRadius: 10 }}
resizeMode="stretch"
/>
解決方法：borderRadius設置在父組件View上
<View style={{ borderRadius: 10 }}>
<Image
source={image.icon}
resizeMode="stretch"
/>
</View>
11、文字設置了加粗後需要設置字體，否則部分Android機型上可能會有不同的表現
解決方法：增加fontFamily: 'System'
title: {
fontWeight: 'bold',
fontFamily: 'System',
}
12、Text顯示文字時，如果有段中有英文、中文、標點符號時，換行規則：
1） Text在顯示中文的時候 標點符號不能顯示在一行的行首和行尾，如果一個標點符號剛好在一行的行尾，該標點符號就會連同前一個字符跳到下一行顯示；
2）一個英文單詞不能被顯示在兩行中（ Text在顯示英文時，標點符號是可以放在行尾的，但英文單詞也不能分開 ）；
3）全角和半角的問題，漢字無論全角還是半角都是佔2個字節，英文和符號在半角是佔一個字節，全角是佔兩個字節。
解決方法：參考https://www.iteye.com/blog/niufc-1729792 這篇博客
13、ImageBackground組件設置style樣式borderRadius在Android 上無效果
解決方法：給ImageBackground組件屬性imageStyle上設置borderRadius
<ImageBackground
imageStyle={{ borderRadius: xxx }}
>...</ImageBackground>
14、在react-native ^0.61.1版本上給View設置borderRadius在Android上無效果
解決方法： 給需要設置borderRadius的View組件嵌套在一個帶有backgroundColor屬性的View組件裏
<View>
style={{
...
backgroundColor: 'rgba(0,0,0,.005)'
}}
>
<View style={{
...
borderRadius: ...
}}/>
</View>
IOS
1、在WebView中，IOS獲取window.postMessage傳遞參數時，在onMessage中解析參數需使用雙重decodeURIComponent解碼
const injectedJavaScript = `
(function () {
var height = null;
function changeHeight() {
if (document.body.scrollHeight != height) {
height = document.body.scrollHeight;
if (window.postMessage) {
window.postMessage(JSON.stringify({
type: 'setHeight',
data: height,
}))
}
}
}
setTimeout(changeHeight, 500);
}());`;
<WebView
originWhitelist={['*']}
source={{ html: pointsProductInfo.appIntroduce, baseUrl: '' }}
onMessage={(event) => {
try {
const eventData = isIOS() ? decodeURIComponent(decodeURIComponent(event.nativeEvent.data)) : event.nativeEvent.data;
const action = JSON.parse(eventData);
const { type, data } = action;
if (Object.prototype.hasOwnProperty.call(this.OnMessageActions, type)) {
this.OnMessageActions[type](data);
}
} catch (error) {
console.error('ShowWebViewPage onMessage錯誤', error);
}
}}
/>
2、微信 會屏蔽分享的紅包 元等文字 分享的圖片不能超過32K