成都android培训
达内成都高升桥中心

18684047202

热门课程

给Android开发者的React Native环境搭建教程

  • 时间:2017-08-31
  • 发布:成都达内
  • 来源:成都达内

React Native是Facebook推出的基于React.js引擎的方便编写跨平台应用的一门语言,逐渐成为了眼下普通Android开发者要掌握的一门语言。Android开发目前属于饱和期,开发人员需要掌握Native开发应用,如果掌握React Native 这样一种跨平台,基于js语言的开发语言,在工作中多一种处理方法的思路,在求职中也就多一个筹码。

React Native已经在我们项目中得到了运用,这一系列的文章是从实际开发的角度给出易上手的React Native教程。

本教程分为以下的几个部分:

React-Native 开发环境搭建

React-Native 常用命令

React-Native 项目结构

用WebStorm 开发js

React 知识汇总

Es6 学习笔记

React-Native 知识点

React-Native 实现热更新

React-Native 相见恨晚的小技能

React-Native 底层分析

......

本教程基于Ubuntu 14.04,Widows平台和MacOs大同小异。

安装Node.js等工具

1.什么是node.js?

Node.js是一个基于Google V8引擎(Chrome javascript运行时)建立的平台用于方便地搭建响应速度快,易于拓展的网络应用。

2. 安装 nvm(Node Version Manager,Node版本管理器),通过nvm来安装node。

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash

source ~/.bashrc

3.使用nvm安装Node

首先查看服务器有哪些node版本

nvm ls-remote

安装对应版本:

nvm install v5.9.0

查看本地的node版本,如果node版本比较低,会在React-Native运行时出错。

nvm list

切换node版本到默认:

nvm alias default 0.10.32

4.安装yarn

Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。

sudo npm install -g yarn

安装完yarn之后就可以用yarn代替npm了,例如用yarn 代替npm install命令,用yarn add xxx代替npm install —save xxx。

配置ANDROID_HOME

这里会使用 Gradle 进行编辑。编译过程中有可能会出现 Android sdk 找不到,Build tools 版本找不到的错误。这是因为 RN for Android 需要环境变量 ANDROID_HOME,在.bashrc下面添加:

export ANDROID_HOME=/usr/local/opt/android-sdk

开始第一个React Native程序

下面开始第一个React Native程序。运行如下几条命令,直接可以生成一个样例项目:

$ sudo npm install -g react-native-cli

$ react-native init AwesomeProject

$ cd AwesomeProject/

接下来就是激动人心的时候,插上手机或者打开模拟器,开始运行:

$ react-native run-android

手动启动server

有时候你运行 react-native run-android,发现并不能自动运行 dev server,你可以在当前项目目录中运行如下命令来手动启动 server:

$ react-native start

reload js

模拟器在键盘双击r。手机摇晃一下。电视点击menu键。

为Android5.0以下设置端口

首先确认设备和电脑在同一个网段。按 menu 键或者摇晃手机,在开发菜单中设置一下 dev server 的 IP 地址。如果不能打开这个菜单,开启 APP 的显示悬浮窗的权限。选择 Dev Settings-> Debug server host for device,填入电脑的 IP 地址和端口8081。

为常用命令配置快捷键

在.bashrc目录下添加

#react-native

alias rnrunandroid='react-native run-android'

alias rn='react-native'

alias rnstart='react-native start'

alias rnlist='lsof -i :8081'

这样的话在命令行里输入rn就表示react-native,这里和“ll”即”ls -al”类似。

成都android培训成都android培训班成都android培训机构

上一篇:Android 性能优化之Loading Big Bitmaps
下一篇:8种方法让Android成为强大的生产力工具

Android切面编程Aspectj

Android 开发不可错过的开源项目

Android应用程序日志真的泄漏敏感信息了吗?

如何用Android Studio做一个简单的Android App

选择城市和中心
贵州省

广西省

海南省