Wonderjar's Blog

React Native踩坑记录

2018-10-09

按照官网的步骤都走不下去,后来模拟器出现红屏
后来改了package.json里依赖的版本,保存一份

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
"name": "reactNativeExample",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.5.0",
"react-native": "0.57.0"
},
"devDependencies": {
"metro-react-native-babel-preset": "0.45.3",
"babel-jest": "23.6.0",
"jest": "23.6.0",
"react-test-renderer": "16.5.0"
},
"jest": {
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
"\\.(ts|tsx)$": "ts-jest"
},
"preset": "react-native"
}
}

添加transform也是需要的

打包debug版

1
2
react-native bundle --dev false --platform android --entry-file index.js --bundle-output ./android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest ./android/app/build/intermediates/res/merged/debug
cd android && ./gradlew assembleDebug

不知道为什么后来需要改成这样

1
react-native bundle --dev false --platform android --entry-file index.js --bundle-output ./android/app/src/main/index.android.bundle --assets-dest ./android/app/src/main/res

https://stackoverflow.com/questions/48563283/unable-to-load-script-from-assets-index-android-bundle

remote debug JS

Go to http://localhost:8081/debugger-ui/ . Then stop remote js debugging and run your react native app again. Finally debug js remotely. Has worked for me.

错误

node_modules_reactnavigationstack_dist_views_assets_backicon.png: error: uncompiled PNG
解决办法 rm -rf android/app/build