React Native 日常開發(fā)遇到問題和解決

以下是本人開發(fā)React Native中，目前所遇到的問題和解決方式，希望能夠幫助更多的人解決問題，和減少走彎路;

問題：運行run-android報錯`the develop server returned response errpr code:500`

解決:

1、npm i react-native-material-design -g --save
2杖玲、npm i react-native-material-design --save
3、npm install 
4淘正、構(gòu)建 react-native run-android

問題：運行有緩存(代碼報錯的時候可能會有緩存問題)

解決：

1摆马、先關(guān)閉Metro Bundler
2、rm -rf ~/.rncache
3鸿吆、rm  -rf  package-lock.json
4囤采、rm -rf node_modules/

問題: bundling failed: Error: Unable to resolve module ` react-native-screens` from `node_modules/react-navigation-tabs/src/navigators/createBottomTabNavigator.js

解決：

1、npm install --save react-native-gesture-handler react-native-reanimated react-native-screens
2惩淳、react-native link react-native-reanimated

問題: 運行react-native run-ios加載時如下報錯

Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening xiaochengwangshi.xcworkspace. Run CLI with --verbose

解決:

cd ios && pod install

問題：劉海機(jī)導(dǎo)致狀態(tài)欄顯示

解決：

/使用<SafeAreaView> 嵌套<StatusBar/>

范例

import { View, Text, StyleSheet, TouchableOpacity, StatusBar, SafeAreaView } from 'react-native';
<SafeAreaView style={[styles.View, {backgroundColor: backgroundColor}]}>
  <StatusBar backgroundColor={backgroundColor} />
  <View style={[styles.View, {backgroundColor: BodyColor}]}>{ children }</View>
</SafeAreaView>

問題：Android navigation標(biāo)題不居中(版本: 4.2.2)
解決：

headerTitleAlign: "center"

范例:

extContentScreen: {
     screen: TextContentScreen,  
     navigationOptions: ({navigation}) => ({
         headerTitle: "正文",
         headerBackTitle: null,
         headerTruncatedBackTitle: null,
         headerStyle: {height: headerHeight},
         headerTitleStyle:{ 
             fontSize: 16,
             fontWeight: "bold"
         },
         // 安卓手機(jī)title劇中
        headerTitleAlign: "center"
    })
}

問題：TextInput 在IOS上蕉毯，被鍵盤擋住

解決：

使用 <KeyboardAvoidingView/>

范例

<KeyboardAvoidingView
    behavior={Platform.OS === 'ios' ? 'padding' : undefined}
    pointerEvents="box-none"
    style={{ width: "100%" }}
    keyboardVerticalOffset={78}
>
// 這里放需要被頂起來的View或者TextInput(看你自己怎么嵌套)
</KeyboardAvoidingView>

問題： android打包，真機(jī)沒有顯示圖片

解決:

1思犁、mkdir -p android/app/src/main/assets 
2代虾、react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

問題：ReactNative ios14看不見圖片

解決：

// 修改node_modules中react-native/Libraries/Image/RCTUIImageViewAnimated.m文件
// 代碼如下
 if (_currentFrame) {
      layer.contentsScale = self.animatedImageScale;
      layer.contents = (__bridge id)_currentFrame.CGImage;
  }
 //  解決ios14以上的系統(tǒng)看不見圖片
  else{    
        [super displayLayer:layer];
  }

問題：運行 npm run ios的時候終端出現(xiàn)

// 這里的USER是你自己的目錄， PROJECT是你的項目
Loading dependency graph...events.js:180
      throw er; // Unhandled 'error' event
      ^

Error: EMFILE: too many open files, watch
    at FSEvent.FSWatcher._handle.onchange (internal/fs/watchers.js:123:28)
Emitted 'error' event at:
    at NodeWatcher.checkedEmitError (/Users/USER/project/PROJECT/node_modules/sane/src/node_watcher.js:143:12)
    at FSWatcher.emit (events.js:203:13)
    at FSEvent.FSWatcher._handle.onchange (internal/fs/watchers.js:129:12) {
  errno: -24,
  syscall: 'watch',
  code: 'EMFILE',
  filename: null
}

原因：因為React Native在內(nèi)部可以用來watchman監(jiān)視文件更改（用于在應(yīng)用程序中提供熱重載以在文件更改時刷新它）

解決：

brew install watchman

問題運行npm run android時終端報錯

Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 905ms

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

解決：

// 需要修改的文件路徑：andorid/gradle/wrapper/gradle-wrapper.properties
distributionUrl 改為
distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip

問題 android和ios跳轉(zhuǎn)頁面動畫不一致

解決

// react-navigation-stack 版本是^2.2.3
import { createStackNavigator, TransitionPresets } from 'react-navigation-stack';

const AppNavigator = createStackNavigator(
    {...},
    {
        initialRouteName: "Tab", 
        navigationOptions: ({navigation}) => ({
            header: null,
        }),
        defaultNavigationOptions: {
            // 關(guān)鍵設(shè)定
            ...TransitionPresets.SlideFromRightIOS,
        },
    },
);

const AppContainer = createAppContainer(AppNavigator);

錄制.gif

每天累計一點新知識激蹲，下一個大神就是你～

請勿抄襲發(fā)布棉磨，發(fā)現(xiàn)必究！Ｍ信弧含蓉！