基本步骤

安装Node.js 验证是否安装Node.js node -v安装gitnpm instal -g nrm 安装npm模块npm install -g npm@2 安装npm2npm install -g react-native-cli 安装ReactNative

如何上面几个步骤下载慢，可以先执行下面这个命令 npm install -g cnpm --registry=https://registry.npm.taobao.org

如果安装错了，可以使用命令卸载，比如卸载ReactNative npm -uninstall -g react-native-cli

IDE

可以使用Sublime Text 3

同时安装下面几个插件

Package Control https://packagecontrol.io/installation

Sublime Text 3 控制台输入如下代码

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', ' ')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

然后重启Sublime Text 3,Ctr+Shift+P,搜索Package Control：Install package，然后继续安装

Babel-sublime

支持ES 6语法与React Native的JSX语法的高亮显示

sublimeLinter

支持对JS进行代码检测，安装完后，然后执行命令

npm install -g JSHint,然后配置sublimeLinter,

Tools -> sublimeLinter -> Open user Settings,会打开一个文件SublimeLinter.sublime-settings，复制https://segmentfault.com/a/1190000000389188里面的代码进去，里面涉及到路径修改为自己的电脑路径

JSFormat

自动格式化JS代码

浏览器安装React Dev tool

初始化第一个工程

react-native init Project47

47是指ReactNative的版本,可访问https://github.com/facebook/react-native/releases查看

下载完后，可以通过命令查看

npm list >npmlist.txt 下载了哪些依赖包，这些依赖包都在当前工程的node_modules里面 然后我们可以备份下工程，以防后面需要恢复

Android运行调试

连接手机 adb devices，如果连接成功就会显示相应的设备，Android5.0以上手机需要执行下面命令才会显示

adb reverse tcp:8081 tcp:8081

执行项目到Android

react-native run-android

在以后调试应用的时候就不需要执行上面命令了，需要执行下面这条命令

react-native start

如果上面命令执行失败，可以将android工程导入AndroidStudio里面修改并执行

执行成功之后，注意打开App的悬浮窗权限，以及启动react-native start,否则会显示红屏。Android5.0以下手机需要设置本地IP 最后执行成功如下图效果

简单修改代码

在index.android.js添加代码

let Dimensions = require('Dimensions'); let PixelRatio = require('PixelRatio'); let totalWidth = Dimensions.get('window').width; let totalHeight = Dimensions.get('window').height; let pixelRatio = PixelRatio.get(); <Text style={styles.welcome}> pixelRatio = {pixelRatio} </Text> <Text style={styles.welcome}> totalWidth = {totalWidth} </Text> <Text style={styles.welcome}> totalHeight = {totalHeight} </Text>

最后显示如下

简单的登录页面布局

import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TextInput } from 'react-native'; let Dimensions = require('Dimensions'); let totalWidth = Dimensions.get('window').width; let totalHeight = Dimensions.get('window').height; let leftStartPoint = totalWidth *0.1; let componentWidth = totalWidth * 0.8; export default class Project47 extends Component { constructor(props){ super(props); this.state = { inputNum:'', inputpwd:'' } } render(){ return ( <View style={styles.container}> <TextInput style={styles.numberInputStyle} placeholder={'请输入手机号码'} maxLength={11} keyboardType='numeric' onChangeText={(inputNum) => this.setState({inputNum})} /> <Text style={styles.textPromptStyle}> 您输入的手机号：{this.state.inputNum} </Text> <TextInput style={styles.passwordInputStyle} secureTextEntry= {true} onChangeText={(inputpwd) => this.setState({inputpwd})} placeholder='请输入密码' /> <Text style={styles.bigTextPromt}> 确 定 </Text> </View> ); } } const styles = StyleSheet.create({ container:{ flex:1, backgroundColor:'white', }, numberInputStyle:{ top:20, left:leftStartPoint, width:componentWidth, backgroundColor:'white', fontSize:20 }, textPromptStyle:{ top:30, left:leftStartPoint, width:componentWidth, fontSize:20 }, passwordInputStyle:{ top:50, left:leftStartPoint, width:componentWidth, backgroundColor:'white', fontSize:20 }, bigTextPromt:{ top:70, left:leftStartPoint, width:componentWidth, paddingTop:5, paddingBottom:5, backgroundColor:'blue', color:'white', textAlign:'center', fontSize:24 } }); AppRegistry.registerComponent('Project47', () => Project47);

常见问题

react-native 不是内部或外部命令，也不是可运行的程序 或批处理文件。 nodeJS路径配置不正确,执行下面命令 npm config set prefix "E:\IDE\NodeJs\nodejs\node_global" npm config set cache "E:\IDE\NodeJs\nodejs\node_cache" 替换上面的路径问自己的电脑配置路径，然后在电脑Path路径，配置 E:\IDE\NodeJs\nodejs\node_global

npm ERR! Windows_NT 10.0.14393 执行命令 npm --registry http://registry.cnpmjs.org info underscore

红屏问题 1，adb reverse tcp:8081 tcp:8081 2，第一次安装需执行react-native run-android 3，react-native start