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

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

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

摘要

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

引言

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

正文

ScrollView無法在TouchableOpacity組件內滑動

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

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

RN熱更新問題

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

RN中獲取高度的解決方法

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

RN強制橫屏UI適配問題

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

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

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

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

設置環(huán)境變量

env GIT_SSL_NO_VERIFY=true

加固混淆

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

使用iPAGuard等工具進行IPA重簽名

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