React Native 日常开发遇到问题和解决

• 以下是本人开发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、构建 react-native run-android

问题：运行有缓存(代码报错的时候可能会有缓存问题)

解决：

1、先关闭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

问题： 刘海机导致状态栏显示

解决：

/使用<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标题不居中(版本: 4.2.2)
解决：

headerTitleAlign: "center"

范例:

extContentScreen: {
     screen: TextContentScreen,  
     navigationOptions: ({navigation}) => ({
         headerTitle: "正文",
         headerBackTitle: null,
         headerTruncatedBackTitle: null,
         headerStyle: {height: headerHeight},
         headerTitleStyle:{ 
             fontSize: 16,
             fontWeight: "bold"
         },
         // 安卓手机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打包，真机没有显示图片

解决:

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以上的系统看不见图片
  else{    
        [super displayLayer:layer];
  }

问题：运行 npm run ios的时候终端出现

// 这里的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在内部可以用来watchman监视文件更改（用于在应用程序中提供热重载以在文件更改时刷新它）

解决：

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跳转页面动画不一致

解决

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

const AppNavigator = createStackNavigator(
    {...},
    {
        initialRouteName: "Tab", 
        navigationOptions: ({navigation}) => ({
            header: null,
        }),
        defaultNavigationOptions: {
            // 关键设定
            ...TransitionPresets.SlideFromRightIOS,
        },
    },
);

const AppContainer = createAppContainer(AppNavigator);

录制.gif

• 每天累计一点新知识，下一个大神就是你～

请勿抄袭发布，发现必究！！！