React Native开发笔记

请尊重博主劳动成果,转载请标明出处。

一 下载相关开发工具

1 JDK

已安装了JDK 1.8

2 Android SDK

(Android相关资源整理网站:http://www.androiddevtools.cn/
这个已有,环境变量也设置好了。
Android SDK Paltform-tools 25.0.1
Android SDK Build-tools 25.0.1
Android SDK Build-tools 23.0.1
SDK Platform 25
SDK Platform 23
Android Support Repository 更新到最新

react-native的Android相关的模块中使用到23的编译sdk和build-tools。而25是我用来编译工程用的。将Android Support Repository 更新到最新后,就不会出现缺少第三方包问题。

3 Android Studio

已安装了2.2版本,用来编译和调试,以及添加自定义的模块。

4 Python

下载2.7版本的安装包,直接进行安装。这个好像是用来作为运行辅助的python脚本。

5 Node.js

下载6.10.3版本安装。用于安装react-native相关的包,以及当作服务器运行编写的js代

6 Git

已安装了2.10.1版本,这个用于版本管理。

二 使用命令安装React Native

运行node.js工具,配置下npm镜像。(以后的下载就可以直接从淘宝的下载,可以有效避免几kb的国外下载速度。)。命令如下:

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

现在可以安装React Native相关的工具。
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
运行以下命令:

npm install -g yarn react-native-cli

继续设置yarn镜像。

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

使用命令查看安装的ract-native-cli和yarn版本。

react-native -v

结果:
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

查看yarn版本。

yarn -v

结果:
yarn install v0.24.4

安装react-native成功。

三创建工程和运行

1 创建工程

将控制台的当前目录切换到工程目录,使用命令创建react-native工程。

react-native init RNDemo

运行命令后,控制台便不断输出生成过程的日志信息。需要10来分钟的手机。如果网络好,可能会更短些。

2 运行工程

RNDemo工程生成成功,运行Android Studio,将RNDemo中的android项目导入。连接手机编译运行。手机上显示了一个红色的错误页面。

因为没有运行js,所以提示服务器找不到。使用cd RNDemo进入工程,继续输入命令:

react-native start

输出日志信息:

Scanning 580 folders for symlinks in /xx/xx/RNDemo/node_modules (8ms)
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /xx/xx/RNDemo 


React packager ready.

可以看到“React packager ready”,RNDemo的js代码成功运行。从手机的任务栏退出RNDemo,重新进入。结果为白屏。

再启动一个控制台,输入以下adb命令:

adb reverse tcp:8081 tcp:8081

如果有连接多个设备,则需要指定设备。首先使用adb devices查看设备,然后使用-s来指定设备。
例如:查看到的设备号为123-XX-0x1234,则输入命令为adb -s 123-XX-0x1234 reverse tcp:8081 tcp:8081

3 安装其它模块命令

如果js代码有引用到navigation或redux等模块时,由于没有安装这些模块,运行时会报错。可以使用npm命令来安装这些模块,格式:npm install --save modelName
例如:
安装react-navigation:npm install --save react-navigation
安装react-redux:npm install --save react-redux

四 推荐的网站

js6语法学习
ECMAScript 6 入门:http://es6.ruanyifeng.com/

API介绍和使用文档
英文文档:https://facebook.github.io/react-native/docs/getting-started.html
中文文档:https://reactnative.cn/docs/0.46/getting-started.html

RN导航跳转
React Navigation:https://reactnavigation.org/docs/navigators/navigation-prop

状态和数据管理容器
Redux中文文档:http://cn.redux.js.org/

官方Demo
F8 App开发指南:https://f8-app.liaohuqiu.net/#content

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值