一起来看下React Native

前段时间一直在忙着写Android端的代码，所以就一直没有去研究React Native这个东东；据我所知，现在某些公司对于前端开发都需要熟悉这个东西，所以，就不得不去看下，这个React Native到底是什么东西。

那么首先，我们必须的安装React Native的环境。

我们需要下载下Node.js，下载完安装之后

Node.js打开的时候.png

我们需要开启装逼模式。。。。。

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

好像在Node.js6.0之后里面是自带npm的，之前我们还是需要去安装的，对此不是很了解。说错了就当没说。。

输入上面两行号代码.png

复制代码就行，然后接下来就是重点了

npm install -g react-native-cli

很明显，install，就是安装，那么这句话就是安装React Native了

输入npm install -g react-native-cli.png

等他下载完成，就可以了。

那么接下来，我们需要去创建React Native项目，那我们接下来创建一个试试

react-native init AwesomeProject //这就是创建项目的命令

创建项目 创建项目图2

这里有提示了 To run your app on iOS 和 To run your app on Android ，这里我们用的是AndroidsStudio，所以，到现在为止就不需要管这个命令窗口了，项目已经创建完成了，然后我们要去C盘找到这个React Native文件

文件夹位置.png

是不是有了这个文件，我们现在开启AndroidsStudio，然后去找里面的Android文件

AndroidStudio打开文件.png

选择android文件打开，AndroidStudio就会自动配置这个文件，那么配置完成之后 ，我们开启模拟器，启动运行完成之后

运行项目图片

这里就会出现这样的界面，那么，根据我们多年编程的经验，红色就一定是报错，看不得红色；所以，我们需要找下，到底是什么原因？原因就是npm没启动。

那么接下来我们需要打开这个DaJianShu这个项目，首先我们需要下载WebStrom
安装的时候，是需要序列号的，获取序列号，点击直接获取之后会有个弹框，吧里面的内容全部复制，然后在安装的界面选择第二个选项，复制进去，然后你就可以安装了，完成之后，我们打开WebStorm。
其实这个WebStorm是和AndroidStudio是同一内核的，也就是idea的内核，所以，基本上这些设置啊什么的都是一样的，所以我们可以open我们的DaJianShu项目。

项目结构

整个项目就是这样子的，那么现在我们来配置下npm

点击添加配置

点击添加配置，然后

Paste_Image.png

点击npm

配置

注意这里要改成start，改好之后点击ok就完成了。

配置

点击就运行了，然后在模拟器上点击ReLoad，稍等一会就回出现Wecome React Native，恩 这就是配置完全成功的界面，那么接下来，我们来看下怎么去编写界面

项目.png

打开index.android.js文件，我们发现里面的代码很像HTML代码，但是又不是html，这里我写了个简单的注册登录界面

代码

import React, { Component } from 'react';
import {  
      AppRegistry,  
      StyleSheet,  
      Text,  
      View,  
      Image,  
      topview, 
      ListView,  
      TextInput,  
      Alert, 
      TouchableHighlight}
 from 'react-native';
var Dimensions = require("Dimensions");
var {width,height} = Dimensions.get('window');
 class OneRN extends Component {  
      render(){    
         return(    
            <View style={styles.container}>      
               <View style={styles.topview}>        
               <Text style={styles.topTitle}>Login_index</Text>  
             </View>      
             <View style={styles.input_view}>       
               <TextInput style={styles.inputstyle} placeholder={"用户名"}/>        
               <TextInput style={styles.inputstyle} placeholder={"密码"}/>      
             </View>      
             <View style={styles.login_view}>        
                <Text style={styles.btn_text}>登 录</Text>      
             </View>    
            </View>    );  }}
const styles = StyleSheet.create({  
        container: {   
              flex: 1,  
        },    
        topview:{        
              height :44,        
              backgroundColor:'red',        
              justifyContent:'center',        
              alignItems:'center'    
        },    
        topTitle:{    
              color:'#fff',        
              fontSize:16    
        },    
        input_view:{    
              marginTop:15,        
              padding:8    
        },   
        inputstyle:{    
              backgroundColor:'#fff',        
              height:64,        
              paddingLeft:5,        
              paddingBottom:15    
        },    
        login_view:{        
              width : width-30,        
              backgroundColor:'red',        
              height:44,        
              marginLeft:15,        
              marginTop: 15,        
              justifyContent:'center',        
              alignItems:'center'    
        },    
        btn_text:{        
              color:"#fff",        
              fontSize:15    
        }});
AppRegistry.registerComponent('OneRN', () => OneRN);

好了，最后页面显示的是这样的

页面显示

到此，React Native已经配置完成了。
给大家推荐一个网站，学习 React Native。