快捷導(dǎo)航

React?Native性能優(yōu)化指南及問題小結(jié)

更新時間：2024年01月23日 11:49:09 作者：iOS學(xué)霸

本文將介紹在React?Native開發(fā)中常見的性能優(yōu)化問題和解決方案,包括ScrollView內(nèi)無法滑動、熱更新導(dǎo)致的文件引用問題、高度獲取、強(qiáng)制橫屏UI適配、低版本RN適配iOS14、緩存清理、navigation參數(shù)取值等,感興趣的朋友一起看看吧

摘要

本文將介紹在React Native開發(fā)中常見的性能優(yōu)化問題和解決方案，包括ScrollView內(nèi)無法滑動、熱更新導(dǎo)致的文件引用問題、高度獲取、強(qiáng)制橫屏UI適配、低版本RN適配iOS14、緩存清理、navigation參數(shù)取值等。通過代碼案例演示和詳細(xì)說明，幫助開發(fā)者更好地理解和解決React Native中的性能問題。

引言

React Native作為一種跨平臺的移動應(yīng)用開發(fā)框架，受到了廣泛的關(guān)注和應(yīng)用。然而，在實(shí)際開發(fā)中，我們常常會遇到一些性能優(yōu)化的挑戰(zhàn)，如何解決這些問題成為了開發(fā)者們需要思考的重要問題。本篇博客旨在幫助開發(fā)者更好地理解React Native中的性能優(yōu)化問題，并提供相應(yīng)的解決方案。

正文

ScrollView無法在TouchableOpacity組件內(nèi)滑動

當(dāng)ScrollView內(nèi)的內(nèi)容使用TouchableOpacity進(jìn)行包裹時，可能會出現(xiàn)無法滑動的情況。解決方法是將onPress={() => {}}屬性添加到TouchableOpacity組件上。

<TouchableOpacity onPress={() => {}}>
  {/* Your content here */}
</TouchableOpacity>

RN熱更新問題

使用codepush進(jìn)行熱更后，src目錄下的音頻文件在安卓系統(tǒng)中無法引用。解決方法是將文件放到原生系統(tǒng)中，熱更的bundle文件無法打包音頻文件。

RN中獲取高度的解決方法

// 屏幕高度（狀態(tài)欄+安全區(qū)+下方虛擬按鍵操作區(qū)）
Dimensions.get('screen').height
// 窗口高度（狀態(tài)欄+安全區(qū)）
Dimensions.get('window').height

RN強(qiáng)制橫屏UI適配問題

通過Dimensions.get()獲取到的寬、高并不是橫屏后的寬高。解決方法是使用橫屏下寬>高的普遍規(guī)則進(jìn)行頁面適配。

低版本RN（0.63以下）適配iOS14圖片無法顯示問題

修改node_modules中react-native/Libraries/Image/RCTUIImageViewAnimates.m文件，添加以下內(nèi)容：

if (_currentFrame) { //275行
  layer.contentsScale = self.animatedImageScale;
  layer.contents = (__bridge id)_currentFrame.CGImage;
} else { //加上這個 不然ios14以上的系統(tǒng)看不見圖片
  [super displayLayer:layer];
}

RN清理緩存

watchman watch-del-all
rm -rf node_modules && npm install
rm -rf /tmp/metro-bundler-cache-* (npm start --reset-cache/react-native start --reset-cache)
rm -rf /tmp/haste-map-react-native-packager-*

RN navigation參數(shù)取值

console.log(this.props.navigation.state.params.data)

pod install 或者npm install 443問題處理

添加行：

sudo vim /etc/hosts

添加行：

199.232.68.133 raw.githubusercontent.com
140.82.113.3 github.com

清空git代理

git config --global --unset http.proxy
git config --global --unset https.proxy
git config --global --list

設(shè)置環(huán)境變量

env GIT_SSL_NO_VERIFY=true

加固混淆

為了保護(hù)React Native應(yīng)用程序不被攻擊者攻擊，我們需要進(jìn)行代碼混淆和加固操作。以下是一些常見的加固混淆方法：

使用iPAGuard等工具進(jìn)行IPA重簽名

使用iPAGuardr對JavaScript代碼進(jìn)行混淆，只要是ipa都可以，不限制OC，Swift，F(xiàn)lutter，React Native，H5類app?？蓪OS ipa 文件的代碼，代碼庫，資源文件等進(jìn)行混淆保護(hù)。可以根據(jù)設(shè)置對函數(shù)名、變量名、類名等關(guān)鍵代碼進(jìn)行重命名和混淆處理，降低代碼的可讀性，增加ipa破解反編譯難度?？梢詫D片，資源，配置等進(jìn)行修改名稱，修改md5。

以上是一些常見的加固混淆方法，我們可以根據(jù)實(shí)際情況選擇合適的方法來加固我們的React Native應(yīng)用程序。

總結(jié)

本篇博客詳細(xì)介紹了React Native的代碼規(guī)范和加固方法。通過遵守代碼規(guī)范，可以讓我們編寫的代碼更加規(guī)范化、易于維護(hù)。而加固混淆可以保護(hù)我們的React Native應(yīng)用程序不被攻擊者攻擊，提高應(yīng)用的安全性。希望這篇博客能夠?qū)Υ蠹矣兴鶐椭?/p>