React Native 简单入门 一

作者: 我是午饭 | 来源:发表于2017-11-14 10:16 被阅读119次

入门准备

创建react native app有两种方式,一种是快速开始方式,无需安装android studio或xcode,借助官方的工具App Expo客户端可以快速查看效果,另一种是带有原生代码,需要安装android或xcode,可以扩展原生插件,可以打包出app,下面简单说下两种方式的安装步骤。

快速开始

你要安装有node,如果没有的话,请到node官网下载安装。安装好node之后,使用npm安装create-react-native-app,打开一个命令行终端,输入下面命令:

npm install -g create-react-native-app

如果速度太慢,可以设置一下npm国内镜像或者科学上网,通过下面命令设置npm镜像

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

顺带说一下,这里或后续的各种安装不怎么建议使用cnpm,可能会因为安装的模块路径与npm的不太一样产生一些其他的问题。安装好create-react-native-app,输入下面命令创建工程并开启服务

create-react-native-app AwesomeProject

cd AwesomeProject
npm start

开启服务之后,最终你可以在命令行终端中看到如下图的输出

命令行输出 ,控制台输出了一个二维码和ip地址,接下来打开Expo App,这个App可以在google play和ios的app stroe下载。不能科学上网的android同学,这边放一个Expo 2.0.0网盘链接。
使用Expo扫描命令行终端上的二维码,不要扫我的,PC和手机要在一网段内。

创建带原生代码的RN工程

这边只介绍windows系统下android环境的搭建,其他环境搭建的请前往RN官网或国内RN中文网查看。
你需要安装的有NodeReact Native CLIPython2JDKAndroid Studio
有稳定梯子的话可以使用Chocolatey来安装Node,Python2和Jdk,Chocolatey是一个windows的包管理器。安装好Chocolatey,输入下面命令

choco install -y nodejs.install python2 jdk8

否则的话就到各自的官网上去下载安装上面这些,或者你之前已经安装好了,检查一下Node的版本是否大于等于4,JDK的版本大于等于8。
安装好上面那些之后,通过npm安装React Native CLI

npm install -g react-native-cli

最后就是android开发环境的搭建
前去官网下载安装android studio,上不去的可以到android studio中文社区下载或自行搜索下载。下载完成后打开安装,安装完成后来到下面的欢迎界面

android studio ,点击右下脚的configure,然后选择SDK Manager安装SDK,在SDK platforms tab页中,勾选android 6.0,在SDK tools勾选23.0.1点击应用开始下载。最后右键我的电脑,新建一个SDK的环境变量ANDROID_HOME如下图 环境变量 ,注意这边的路径为自己电脑上SDK的放置路径。
到这里,算是大功告成了。可以开始新建第一个项目了。
react-native init AwesomeProject

接下来测试安装

cd AwesomeProject
react-native run-android
``

相关文章

网友评论

    本文标题:React Native 简单入门 一

    本文链接:https://www.haomeiwen.com/subject/qkexvxtx.html