基本步骤

安装Node.js 验证是否安装Node.js node -v
安装git
npm instal -g nrm 安装npm模块
npm install -g npm@2 安装npm2
npm 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(' ', '%20')).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
最后执行成功如下图效果

图1.png

简单修改代码

在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>

最后显示如下

图2.png

简单的登录页面布局

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

Window搭建RN环境