×
广告

React Native 环境搭建

96
JangGwa
2016.10.30 11:44* 字数 696

前言

笔者是一名 Android 开发者,之前没有任何前端开发经验,也是从0开始学习一些前端知识。有兴趣的朋友可以和我一起学习,后续也会更新一些前端的学习笔记和自己的心得体会。

React Native 环境搭建

安装

1. Homebrew, Mac 系统的包管理器,用于安装 NodeJS 和一些其他必需的工具软件。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. Node ,使用 Homebrew 来安装 Node.js.

brew install node

3. React Native 的命令行工具

sudo npm install -g react-native-cli

4. Git,如果你已经安装过 Xcode,则 Git 也已经一并安装了。如若没有,则使用下列命令安装:

brew install git

5. 获取 React Native 的源代码和依赖包

react-native init AwesomeProject

这边执行这个命令的话会被墙,可以按下面的命令使用淘宝的镜像去执行。笔者亲测,大概2分钟创建项目完毕。

npm config set registry=http://registry.npm.taobao.org/

react-native init AwesomeProject

推荐安装

1. Watchman,是由 Facebook 提供的监视文件系统变更的工具

brew install watchman

2. Flow,是一个静态的 JS 类型检查工具

brew install flow

测试安装

cd AwesomeProject

react-native run-android

这边跑项目会遇到各式各样的问题,我列举一些我遇到的问题和解决方案
1.问题:提示 SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
解决方案:在创建的 AwesomeProject 下的 android 目录下常见一个 local.properties
文件,文件内容加入

sdk.dir = /Users/USERNAME/Library/Android/sdk

其中 USERNAME 为你的用户名
2.问题:提示 failed to find Build Tools revision 23.0.1
解决方案:打开 Android SDK,安装 Build Tools revision 23.0.1
3.问题:手机运行成功屏幕显示红色,提示没有连接服务器 js Server
解决方案:摇一摇手机,点击Dev Settings -> Debug server host for device ,填入你开发电脑的 IP 地址。
4.问题:手机运行成功屏幕显示红色,提示 Could not get BatchedBridge, make sure your bundle is packaged properly” on start of app
解决方案:我用了很多办法都没有成功,后来用系统6.0以上的手机就ok了
5.问题:手机运行成功且出现 Welcome to React Native!
解决方案:休息一会,恭喜你环境搭建成功了!!
第一个 React Native 程序
打开目录下的 index.android.js ,对代码进行相应的修改

import React, { Component } from 'react';

import {
 AppRegistry,
 StyleSheet,
 Text,
 View
} from 'react-native';
​
export default class AwesomeProject extends Component {
 render() {
   return (
     <View style={styles.container}>
       <Text style={styles.welcome}>
         Welcome to React Native!
       </Text>
       <Text style={styles.instructions}>
         JangGwa
       </Text>
       <Text style={styles.instructions}>
         一起从0开始学习 React Native
       </Text>
     </View>
   );
 }
}
​
const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
 },
 welcome: {
   fontSize: 20,
   textAlign: 'center',
   margin: 10,
 },
 instructions: {
   textAlign: 'center',
   color: '#333333',
   marginBottom: 5,
 },
});
​
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

最后说一下如何调试,当我们修改完代码,不需要重新部署,如果是在真机上调试,可以摇一摇弹出菜单然后点击 Reload;如果在虚拟机上可以按两下 R 键进行 Reload,也可以通过输入命令adb shell input keyevent 82
弹出菜单。

前端学习
Web note ad 1