React native笔记

一、框架介绍
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台
二、环境搭建
按照官网搭建环境变量，SDK可以通过安装android studio来安装对应的SDK版本
在终端输入:

C:\myApp>adb devices //测试sdk适配安装配置成功
List of devices attached
d350e882       devices    //真机为例，开启开发者模式（USB调试开启）如果出现设备列表，则说明连接成功

备注：如果需要重启adb

adb kill-server //关闭
adb start-server //开启

三、创建新项目

react-native init myApp

安卓模拟器： 推荐使用Genymotion，打开模拟器选择虚拟设备型号，就可以运行一个模拟手机界面
真机： 连接电脑，开启开发者模式（USB调试开启）

cd myApp
react-native run-android

如果配置正确，这里就可以运行一个界面：

QQ截图20181031150834.png

四、常见问题
项目初始化红屏，这个错误是版本引起的问题

error: bundling failed: Error: 
Unable to resolve module ./../react-transform-hmr/lib/index.js from /Users/sturm/Desktop/testpro/App.js: 
The module ./../react-transform-hmr/lib/index.js could not be found from /Users/sturm/Desktop/testpro/App.js. 
Indeed, none of these files exist:

解决方案：
在项目初始化或者运行过程中出现红屏，清除node缓存，重新运行
mac:

# Clean cache
  rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*; watchman watch-del-all
# Start Metro Bundler directly
  react-native start# 
# Now run 
 `react-native run-android` or `react-native run-ios` in another tab

window:

# Clean cache
react-native start --reset-cache
# new cmd tab
react-native run-android