ReactNative采坑记

记录一些坑和对rn的理解

1.React-Native 启动时报错 - “no bundle url present”

输入以下命令(先手动启动packager再run)
   react-native start
   react-native run-ios

2.执行react-native run-andriod的时候报错"SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable."

在andriod目录下新建local.properties文件,
里面写
sdk.dir=/Users/xiatian/Library/Android/sdk(这是andriod SDK的path)

rn是如何跑起来的

RN会启动一个node server(也叫Packager),用来把js代码打包成index.ios.bundle.js文件返回;
在不开启live reload情况下,对模拟器的command+r,会让设备向Packager发出http://localhost.com:8081/index.ios.bundle请求,Packager一旦收到请求,会重新打包你的js代码,,并把打包后的结果作为返回丢给设备.然后根据js->oc映射表把它转为原生代码执行.
其实app在设备上运行起来的时候,它的第一个指令就是向http://localhost.com:8081/index.ios.bundle获取打包好的js文件,并把它转换成原生的代码执行.
开启debug模式后,设备会 request to http://localhost:8081/launch-chrome-devtools,packager收到请求后:

旧版会返回一个launchChromeDevTools.applescript文件,applescript打开chrome的 http://localhost:8081/debugger-ui.html页面
现在是返回一个叫 opn的npm包,干的也是一样的事儿.

打开debugger-ui.html页面之后们就会在设备和packager之间建立一个WebSocket连接,等待来自设备的ping..设备的app会发送3个WebSocket ping到Chrome. 如果Chrome反馈 expectedId/sessionId,那么链接将会马上建立.否则设备会抛出一个红屏”Runtime is not ready”.
Chrome和App之间通过WebSocket通信,可以在Chrome像调试网页的JS一样调试ReactNative的js了
开启live reload之后,每次修改了代码之后,都是重新请求了http://localhost.com:8081/index.ios.bundle

4.一次诡异的报错

image.png

export default class Root extends Component {
  render() {
    return (
      <Provider store={store}>
        <App/>
      </Provider>
    );
  }
}

代码就是这样,改了很多次代码,死活还是报这个错误
纠结了几小时后它自己又好了,最后还是这个代码,没改,很诡异.
持续更新…

ReactNative采坑记

rn是如何跑起来的

推荐阅读更多精彩内容