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

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

這里簡單的介紹下React Native

它是借助于FaceBook現(xiàn)有的輪子，它可以實(shí)現(xiàn)對(duì)ISO和Android兩大平臺(tái)的支持

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

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

使用JSX來轉(zhuǎn)換成JS來執(zhí)行，JSX是一種類似于XML語法的腳步擴(kuò)展語言。

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

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

這是一個(gè)導(dǎo)航器,直白的理解就是實(shí)現(xiàn)界面之間的跳轉(zhuǎn)，在React Native中借助它能很好的實(shí)現(xiàn)界面的切換。實(shí)現(xiàn)它需要實(shí)現(xiàn)幾個(gè)必要的方法。

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

Navigator都是由route來控制跳轉(zhuǎn)路線的，所以開始使用時(shí)要初始化route

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

里面的參數(shù)名不受限制，但是你必須要指明跳轉(zhuǎn)的Componnet組件名，方便在后續(xù)執(zhí)行中取出?？梢酝ㄟ^route.component取出。

該配置就是執(zhí)行沒一個(gè)route的具體實(shí)現(xiàn)，從而渲染出來，它提供兩個(gè)內(nèi)置參數(shù)route與navigator，來方便渲染

renderScene={this.renderScene}

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

在renderScene中我們?nèi)〕雒看我獙?dǎo)航的Component，同時(shí)渲染出來，并且把route與navigator傳到渲染的界面中。在渲染界面可以通過this.props.rout與this.props.navigator來獲取。最后一步就是要綁定事件

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

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

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

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

TouchableOpacity是一個(gè)點(diǎn)擊監(jiān)聽組件，可以綁定點(diǎn)擊事件。

 this.props.navigator.pop()}>
            
          

在點(diǎn)擊以后渲染出來的界面中調(diào)用pop方法退出該渲染.

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

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

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

為listView初始化數(shù)據(jù)源,可以通過state狀態(tài)來進(jìn)行保存。

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

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

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

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

renderRow提供了四個(gè)參數(shù)rowData,sectionID,rowID,highlightRow這里主要是利用rowData來獲取數(shù)據(jù)源。布局樣式是使用css-layout來實(shí)現(xiàn),可以直接在組件是使用

style={{flex: 1}}

或者通過StyleSheet來統(tǒng)一創(chuàng)建:

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

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

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

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

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

先就介紹到這里，如果還有需要可以下載源碼,后續(xù)還會(huì)繼續(xù)再做擴(kuò)展

項(xiàng)目地址：https://github.com/idisfkj/RN...
個(gè)人blog：https://idisfkj.github.io