应老大的要求, 最近看了几天的混合开发(Android). 一开始打算使用Ionic来做的, 毕竟前端用的Angular,没想太多就让我玩这个
BUT(此时有太多脏话想说), 还是回到了React Native.
1. 环境安装
这里就粗略的列一下自己所使用的环境,按照实际需求大家取舍
- Node.js (必装,推荐去官网下载)
- SDK (必装,做过Android的老哥请忽略)
- React Native
- WebStorm(可选 , 一款编辑器而已)
2. 创建工程
- 首先到指定目录下, 打开命令行(Ctrl+右击 , 打开命令行), 执行命令:
react-native init MyProject
等待下载第三方库和编译之后 , 就可以用WebStrom打开了
3. 运行项目
- 打开项目目录(cd xxxxx/MyProject)
- 执行命令:
react-native run-android, 这里你需要提前安装好Gradle, 配置文件就不赘述了, 在编译完成后就可以在你的手机上看到报错的红屏了......WTF
在这里根据你设备的不同 , 解决方案也不同(不要害怕报错, 毕竟以后有的是)
- 如果是是小米手机 , 请在设置->应用程序 中 手动添加悬浮窗权限(运行项目的那个绿色条 , 就是悬浮窗)
- 如果是5.0以下, 可以摇晃手机进入开发者菜单 , 选择Dev Settings, 进入Debug server host for device, 在弹出的对话框中输入你的ip地址和端口号 ;格式为 <IP地址:8081>
ip地址查看
- 如果是5.0以上,则只需要使用命令:
adb reverse tcp:8081 tcp:8081.
如果在方法3的时候遇到找到不到命令的问题,这是因为你没有吧安卓的环境配好 , 你可以去重新配置安卓的环境 , 或者偷个懒, 直接在
sdk->platform-tools路径下打开命令行执行命令即可
4. 项目结构
项目结构
在WebStrom中打开React Native项目, 左边的目录如图所示
-
android和ios分别表示编译之后的不同项目的文件,
以android为例, 这里的android文件夹可以直接在Android Studio中运行,熟悉安卓的老哥可以点开具体的看一下, 这里的项目结构和AS创建的默认项目结构完全一样 . -
node_modules: 源代码和三方库
React Native的源码, 以及引入第三方库的源码都在这里 , 有时候项目一直出错 , 可以尝试删除掉该目录重新构建. -
json文件: 配置信息
在package.json中, 有dependencies字段 , 里面包含了项目中使用到的所有的库以及对应版本, 如果是自己使用npm引入的三方库 , 其版本号前有^标记
配置文件
-
index.android.js和index.ios.js: 首次启动的组件
在RN中 , 界面和组件是同一个概念 , 组件也可以使界面 , 也可以是具体的一个控件.在这里有两个不同的启动文件 , 可以让他们同时跳转到两一个页面来达到ios和安卓的统一. 刚开始接触只玩一个就好
网友评论