ReactNative入坑指南(未完成)
2018-08-17 本文已影响3人
_2030
手把手教你入坑的高级指南。
环境搭建
// 启动
$ cd sxtReactNativeTest
$ yarn
$ react-native run-android
// 初始化工程
$ react-native init myApp
$ cd myApp
$ react-native run-android
// android studio 调试
$ react-native start
// 查看连接的设备
$ adb devices
// (Android 5.0及以上)使用adb reverse命令
$ adb reverse tcp:8081 tcp:8081
启动后测试
// 1. 查看React Native packager service
http://127.0.0.1:8081/
// 2. 不能使用代理,否则会报错?
// 3. 调试
http://127.0.0.1:8081/debugger-ui
迁移工程代码
// 1. 初始化一个项目工程
$ react-native init helloword
// 2. 测试是否能正常运行
$ react-native run-android
// 3. 修改安装依赖
替换package.json文件
删除yarn.lock node_modules
// 4. 重新安装依赖,测试是否能正常运行(首报报错重试即可)
$ yarn
$ react-native run-android
// 5. 复制工程代码
拷贝入口文件index.android.js
复制src目录工程代码及依赖
// 6. 修改包名
修改index.android.js文件
AppRegistry.registerComponent('sxtReactNativeTest', () => sxtReactNativeTest);
// 7. 测试是否能正常运行
$ react-native run-android
新建一个工程
// 1. 初始化一个项目工程
$ react-native init hellouyun
// 2. 测试是否能正常运行
$ react-native run-android
// react-native调用android原生示例
// http://blog.csdn.net/bigboysunshine/article/details/53607079
// android/app/src/java/com.*/ 下两文件,根目录下一文件
// 引用
import ToastAndroid from '../../ToastAndroid';
ToastAndroid.show('调用android原生消息提示!',ToastAndroid.SHORT);
引入 antd-mobile
// 引入 antd-mobile#
$ yarn add antd-mobile
$ yarn add babel-plugin-import --dev