React Native 环境配置，常用命令，常见错误总结

一、环境搭建

React Native中文网-搭建开发环境

步骤很详细，一步一步来即可。

二、常用命令：

1、新建一个项目

最新版本项目
react-native init 新项目名称
创建指定版本的项目。
react-native init 新项目名称 --version 0.44.3。注意版本号必须精确到两个小数点。

2、运行

cd到项目根目录

iOS：react-native run-ios
Android:react-native run-android

在某个模拟器下运行程序
react-native run-ios --simulator="iPhone 6（模拟器）"

3、命令行启动安卓模拟器

显示已安装模拟器：
emulator -list-avds

先执行：cd ~/Library/Android/sdk/tools/
再执行：emulator -avd 模拟器名称

或者

1、使用命令查看本机中带的模拟器
emulator -list-avds
Nexus_5X_API_28(我本机上模拟器)

2、进入tools文件夹下新增emu.sh文件
~/Library/Android/sdk/tools

3、emu.sh文件内容
pushd ${ANDROID_HOME}/tools 
emulator -avd 本机的模拟器 
popd

4、在.bash_profile环境变量中配置
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$ANDROID_SDK_ROOT/emulator:$ANDROID_SDK_ROOT/tools:$PATH

5、刷新环境变量
source .bash_profile

6、运行命令启动模拟器
emu.sh

7、如果遇到没权限执行的时候：Permission denied
先执行：chmod +x emu.sh
再执行：emu.sh

三、常见错误

1、报错：Could not find iPhone 6 simulator

对于旧版本，需要修改对应文件

解决：修改配置，支持切换iOS模拟器
1、找到工程如下路径下的文件：
node_modules/react-native/local-cli/runIOS/findMatchingSimulator.js
在文件第30行，有如下代码
if (version.indexOf('iOS') !== 0) {

continue;
}，
注释掉，并添加如下代码：
if (version.indexOf('iOS') !== 0 && !version.includes('iOS')) {
continue;
}
2、执行如下命令，在某个模拟器下运行程序
react-native run-ios --simulator="iPhone 6（模拟器）"

2、error: bundling failed: Error: Unable to resolve module from `/Users/wanggang/Desktop/Project/src/WGTabbarIOS.js`: Module does not exist in the Haste module map or in these directories:

解决：

1. Clear watchman watches: watchman watch-del-all.
2. Delete the node_modules folder: rm -rf node_modules && npm install.
3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.
4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.

3、Invariant Violation: The navigation prop is missing for this navigator. Inreact-navigation 3 you must set up your app container directly. More info:https://reactnavigation.org/docs/en/app-containers.html

解决：

import {
createStackNavigator,
createAppContainer
} from 'react-navigation';
import Login from './view/login.js'
import SignUp from './view/signup.js'
const RootStack = createStackNavigator({
Home: {
screen: Login
},
Signup: {
screen: SignUp
}
});
const App = createAppContainer(RootStack);
export default App;

4、拉取别人项目后，如何运行

1、手动删除package-lock.json
2、删除之前node_modules
rm -rf node_modules
3、重装
yarn install(或者 npm install)
4、手动删除ios目录下的build文件夹

5、

解决：

npm add react-native-gesture-handler
react-native link react-native-gesture-handler