摘要：最后一步就是要綁定事件不懂的可以自己查閱官方文檔與提供了與方法來控制的路線，相當于我們熟知的棧。為初始化數據源可以通過狀態來進行保存。詳情發布日期提供了四個參數這里主要是利用來獲取數據源。

React Native有點大勢所趨，所以前段時間研究了下它，看了它的官方文檔同時也在Github瀏覽了前輩們的杰作，所以自己也寫了一個簡單的Demo也算是一個好的入門。配合官方文檔與代碼實例相信都能很快的進入React Native的世界。下面我介紹的不會很詳細，是針對React Native語法有一定會基礎的同學。

這里簡單的介紹下React Native

它是借助于FaceBook現有的輪子，它可以實現對ISO和Android兩大平臺的支持

使用React.js來操作原生的UI組件，替代了DOM元素

在UI方面，提供了Flexbox的布局，同時也支持css-layout樣式

使用JSX來轉換成JS來執行，JSX是一種類似于XML語法的腳步擴展語言。

對于React Native的環境搭建,可以參考官方文檔Getting Started,如果英文不好的別急，這里還有中文版的Getting Started

推薦使用英文版的，中文版的還是存在坑，下面簡單的介紹下Demo中用到的組件

這是一個導航器,直白的理解就是實現界面之間的跳轉，在React Native中借助它能很好的實現界面的切換。實現它需要實現幾個必要的方法。

 Navigator.SceneConfigs.FloatFromLeft}
          renderScene={this.renderScene}/>

Navigator都是由route來控制跳轉路線的，所以開始使用時要初始化route

initialRoute={{title: "主頁", component: Welcome}}

里面的參數名不受限制，但是你必須要指明跳轉的Componnet組件名，方便在后續執行中取出。可以通過route.component取出。

該配置就是執行沒一個route的具體實現，從而渲染出來，它提供兩個內置參數route與navigator，來方便渲染

renderScene={this.renderScene}

renderScene(route, navigator){
    _navigator = navigator;
    let DefaultComponet = route.component;
    return 
  }

在renderScene中我們取出每次要導航的Component，同時渲染出來，并且把route與navigator傳到渲染的界面中。在渲染界面可以通過this.props.rout與this.props.navigator來獲取。最后一步就是要綁定事件

this.renderScene = this.renderScene.bind(this);

不懂props的可以自己查閱官方文檔

Navigator提供了push與pop方法來控制route的路線，相當于我們熟知的棧。通過push來設置下一個導航的route，通過pop來退出該界面返回原來的界面。

 this.props.navigator.push({
        title: "詳情",
        component: Detail,
        number: rowID,
      })}>
      
        
          
            {rowData.title}
          
          ....
      
      

TouchableOpacity是一個點擊監聽組件，可以綁定點擊事件。

 this.props.navigator.pop()}>
            
          

在點擊以后渲染出來的界面中調用pop方法退出該渲染.

是不是感覺很親切，它要實現的功能跟Android中是一樣的。但是使用方法就不同了哦。不過整體需要的數據原理還是類似。無非也要整個的數據源，與綁定沒個Item的數據。

在渲染之前要設置判斷該數據是否需要從新渲染，這樣就減少許多不必要的渲染步驟，該方法能幫助我們進行判斷。

const listView = new ListView.DataSource({
      rowHasChanged: (r1,r2) => r1!==r2});

為listView初始化數據源,可以通過state狀態來進行保存。

this.state={
      dataSource: listView.cloneWithRows(this._rowData())};
  }

最后在渲染render()生命周期方法中進行組件資源綁定:

其中dataSource與renderRow是兩個必要的方法，前一個是綁定數據源，后一個是綁定渲染的每一行的數據。其中_renderRow是Item的布局。

_renderRow(rowData,sectionID,rowID,highlightRow){
    return(
     this.props.navigator.push({
        title: "詳情",
        component: Detail,
        number: rowID,
      })}>
      
        
          
            {rowData.title}
          
          
            
              {"發布: "+rowData.fb}
            
            
              {"日期: "+rowData.data}
            
          
        
        
      
      
    );
  }

renderRow提供了四個參數rowData,sectionID,rowID,highlightRow這里主要是利用rowData來獲取數據源。布局樣式是使用css-layout來實現,可以直接在組件是使用

style={{flex: 1}}

或者通過StyleSheet來統一創建:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5FCFF",
  },
  title: {
    backgroundColor: "royalblue",
    justifyContent: "center",
    alignItems: "center",
    borderColor: "gray",
    borderBottomWidth: 1,
  },
  ...
});

css這里不多說，自己可以參考官方文檔

這里再簡單介紹下TabNavigator這是一個類似于Android中的FragmentTabHost。相信都知道它的功能是什么了。

         }
          renderSelectedIcon={() => }
          onPress={() => this.setState({selectedTab: "news"})}>
          
        
        ...

通過子標簽來設置每一個底部Item，在其中在設置該Item要渲染的界面，上面的News就是要渲染的界面,該界面可以通過export default News導出，import News from "./News"導入。

先就介紹到這里，如果還有需要可以下載源碼,后續還會繼續再做擴展

項目地址：https://github.com/idisfkj/RN...
個人blog：https://idisfkj.github.io