前段時(shí)間一直在忙著寫Android端的代碼杜顺，所以就一直沒有去研究React Native這個(gè)東東裁僧；據(jù)我所知个束，現(xiàn)在某些公司對(duì)于前端開發(fā)都需要熟悉這個(gè)東西，所以聊疲，就不得不去看下茬底，這個(gè)React Native到底是什么東西。

那么首先售睹，我們必須的安裝React Native的環(huán)境。

我們需要下載下Node.js可训，下載完安裝之后

Node.js打開的時(shí)候.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的谨胞，之前我們還是需要去安裝的固歪，對(duì)此不是很了解。說錯(cuò)了就當(dāng)沒說胯努。牢裳。

輸入上面兩行號(hào)代碼.png

復(fù)制代碼就行，然后接下來就是重點(diǎn)了

npm install -g react-native-cli

很明顯叶沛，install蒲讯，就是安裝，那么這句話就是安裝React Native了

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

等他下載完成灰署，就可以了判帮。

那么接下來局嘁，我們需要去創(chuàng)建React Native項(xiàng)目，那我們接下來創(chuàng)建一個(gè)試試

react-native init AwesomeProject //這就是創(chuàng)建項(xiàng)目的命令

創(chuàng)建項(xiàng)目

創(chuàng)建項(xiàng)目圖2

這里有提示了 To run your app on iOS 和 To run your app on Android 晦墙，這里我們用的是AndroidsStudio悦昵，所以，到現(xiàn)在為止就不需要管這個(gè)命令窗口了晌畅，項(xiàng)目已經(jīng)創(chuàng)建完成了但指，然后我們要去C盤找到這個(gè)React Native文件

文件夾位置.png

是不是有了這個(gè)文件，我們現(xiàn)在開啟AndroidsStudio踩麦，然后去找里面的Android文件

AndroidStudio打開文件.png

選擇android文件打開枚赡，AndroidStudio就會(huì)自動(dòng)配置這個(gè)文件，那么配置完成之后 谓谦，我們開啟模擬器贫橙，啟動(dòng)運(yùn)行完成之后

運(yùn)行項(xiàng)目圖片

這里就會(huì)出現(xiàn)這樣的界面，那么反粥，根據(jù)我們多年編程的經(jīng)驗(yàn)卢肃，紅色就一定是報(bào)錯(cuò)，看不得紅色才顿；所以莫湘，我們需要找下，到底是什么原因郑气？原因就是npm沒啟動(dòng)幅垮。

那么接下來我們需要打開這個(gè)DaJianShu這個(gè)項(xiàng)目，首先我們需要下載WebStrom
安裝的時(shí)候尾组，是需要序列號(hào)的忙芒，獲取序列號(hào)，點(diǎn)擊直接獲取之后會(huì)有個(gè)彈框讳侨，吧里面的內(nèi)容全部復(fù)制呵萨，然后在安裝的界面選擇第二個(gè)選項(xiàng)，復(fù)制進(jìn)去跨跨，然后你就可以安裝了潮峦，完成之后，我們打開WebStorm勇婴。
其實(shí)這個(gè)WebStorm是和AndroidStudio是同一內(nèi)核的忱嘹，也就是idea的內(nèi)核，所以耕渴，基本上這些設(shè)置啊什么的都是一樣的德谅，所以我們可以open我們的DaJianShu項(xiàng)目。

項(xiàng)目結(jié)構(gòu)

整個(gè)項(xiàng)目就是這樣子的萨螺，那么現(xiàn)在我們來配置下npm

點(diǎn)擊添加配置

點(diǎn)擊添加配置窄做，然后

Paste_Image.png

點(diǎn)擊npm

配置

注意這里要改成start愧驱，改好之后點(diǎn)擊ok就完成了。

配置

點(diǎn)擊就運(yùn)行了椭盏，然后在模擬器上點(diǎn)擊ReLoad组砚，稍等一會(huì)就回出現(xiàn)Wecome React Native，恩 這就是配置完全成功的界面掏颊，那么接下來糟红，我們來看下怎么去編寫界面

項(xiàng)目.png

打開index.android.js文件，我們發(fā)現(xiàn)里面的代碼很像HTML代碼乌叶，但是又不是html盆偿，這里我寫了個(gè)簡(jiǎn)單的注冊(cè)登錄界面

代碼

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);

好了，最后頁(yè)面顯示的是這樣的

頁(yè)面顯示

到此准浴，React Native已經(jīng)配置完成了事扭。
給大家推薦一個(gè)網(wǎng)站，學(xué)習(xí) React Native乐横。