記錄一些坑和對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.一次詭異的報錯
export default class Root extends Component {
render() {
return (
<Provider store={store}>
<App/>
</Provider>
);
}
}
代碼就是這樣,改了很多次代碼,死活還是報這個錯誤
糾結了幾小時后它自己又好了,最后還是這個代碼,沒改,很詭異.
持續更新…
