生也有涯,知也无涯。这篇文章主要讲述React-Native 开发 Android环境部署,Hello react-native相关的知识,希望能为你提供帮助。
前提: 一个小web前端,完全不会android 跟ios 的开发,首次接触,有很多不懂的问题。请见谅
环境: win7
成果:
文章图片
文章图片
文章图片
一、SDK安装
提示: 安装需通过代理,不然会很慢哟~~
安装 android studio 安装2.0的版本
在studio中安装以下SDK
文章图片
文章图片
添加环境变量(变量值为sdk路径):
文章图片
二、全局 react-native 安装
npm install -g react-native-cli
三、测试安装
选一个文件夹,在文件夹下面运行
react-native init AwesomeProject cd AwesomeProject react-native run-android
第一行创建一个 react-native 项目,
第三行 android工程中gradle的依赖关系会去先编译node_modules下RN的代码,并加入自己的工程中。
这个时候要是没有弹出打包的弹窗,可以手动触发
cd AwesomeProject react-native start
打包 react-native
这个时候,可以看到项目的目录
文章图片
其中 index.android.js 就是我们的入口文件
我们可以在这里目录下找到我们需要用到的apk
文章图片
把 apk 在 android 手机上安装。
首次打开app 我们需要设置热更新的地址,通过摇一摇手机,把开发菜单摇出来。 点击 Dev Settings
文章图片
Debugging
文章图片
手机与电脑需要在同一网络下,并且填上电脑的地址,端口号默认是8081
文章图片
点击确认之后,我们就可以回到页面上,在开发菜单上点击 reload 就可以看到
文章图片
首次打包我们需要稍等一下
文章图片
接下来我们只需要在这个基础上修改 index.android.js 这个文件就可以啦。
【React-Native 开发 Android环境部署,Hello react-native】
推荐阅读
- Android Studio第三十三期 - 蓝牙开发初识~
- Android5.0之CardView的使用
- 如何手动添加Android Dependencies包
- android自定义View之NotePad出鞘记
- Android6.0状态栏(系统下拉状态栏的定制)
- Android5.0之TextInputLayoutFloatingActionButton的使用
- android自定义View之钟表诞生记
- 玩转Android之Drawable的使用
- Android 添加System权限