React-Native开发-2018-03

React Native

一个使用React的方法编写App应用的工具,由FaceBook开发并且用于Instagram中,随后开源。由于仍在开发过程中,网上找到的很多示例代码以及教程都是基于旧的版本编写的,并不适用。

Nodejs安装与选择

Nodejs需要安装6.x.x或者7.x.x的版本(过低不支持,过高的话自带的npm版本不支持)

https://nodejs.org/en/ 里面直接下载安装即可,没有什么可说的。

Android开发

需要Android Studio,同时需要提前安装配置好Java环境

开始

直接按照官网(https://facebook.github.io/react-native/docs/getting-started.html)上的步骤配置即可。需要让电脑和手机在同一局域网内(直接连接同一个Wifi即可),同时注意使用VPN或者ss的话请绕过对应IP地址。

如果安装了adb工具并且连接了手机,会在android手机上自动安装上Expo,之后可以通过Expo进行应用的调试。但是默认选择的链接方式不一定是你所在的局域网(比如:如果有VMware的服务会使用VMWare的虚拟网络,所以需要停用这些网络)。

打开自己编写的React Native应用后,摇晃手机可以弹出菜单(注意要允许悬浮窗权限)

控件使用,React事件相应等

直接看React和React Native的官方教程即可。

UI设计以及第三方控件

为了使得开发更高效,可以选用第三方库:

https://www.jianshu.com/p/53ff78168acc

https://github.com/rilyu/teaset/blob/master/docs/cn/NavigationBar.md

Step by step

打开cmd(管理员模式)。需要先安装好nodejs、Android Studio,下载android sdk。

  1. cd命令到自己想要创建项目的目录下;

  2. 输入create-react-native-app mytest回车(这里的mytest是项目名称)

  3. 输入cd mytest进入刚才创建的项目目录中

  4. (可选,采用第三方库https://github.com/rilyu/teaset/)输入`npm install –save teaset`

  5. 运行:将安卓手机连接电脑,确保手机电脑在同一局域网内并且该局域网是输入ipconfig之后显示的第一个网络连接(不是的话直接设置网络,将其他不用的网络禁用就好),输入npm run android就可以了。也可以不连接电脑,下载完Expo后在里面的搜索框中输入控制台显示的exp:\地址即可(扫描二维码的方式对我的手机无效)。

  6. 如果可以运行显示出来三行文字,就说明环境配置工具安装什么的都没有问题。打开App.js文件,