React Native For Android

前言

React Native有點大勢所趨，因此前段時間研究了下它，看了它的官方文檔同時也在Github瀏覽了前輩們的傑做，因此本身也寫了一個簡單的Demo也算是一個好的入門。配合官方文檔與代碼實例相信都能很快的進入React Native的世界。下面我介紹的不會很詳細，是針對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中用到的組件

Navigator

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

<Navigator initialRoute={{title: '主頁', component: Welcome}}
          configureScene={(route,routeStack) => Navigator.SceneConfigs.FloatFromLeft}
          renderScene={this.renderScene}/>

initialRoute

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

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

裏面的參數名不受限制，可是你必需要指明跳轉的Componnet組件名，方便在後續執行中取出。能夠經過route.component取出。

renderScene

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

renderScene={this.renderScene}

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

在renderScene中咱們取出每次要導航的Component，同時渲染出來，而且把route與navigator傳到渲染的界面中。在渲染界面能夠經過this.props.rout與this.props.navigator來獲取。最後一步就是要綁定事件

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

不懂props的能夠本身查閱官方文檔

push與pop

Navigator提供了push與pop方法來控制route的路線，至關於咱們熟知的棧。經過push來設置下一個導航的route，經過pop來退出該界面返回原來的界面。

<TouchableOpacity onPress={() => this.props.navigator.push({
        title: '詳情',
        component: Detail,
        number: rowID,
      })}>
      <View style={styles.item}>
        <View style={styles.content}>
          <Text style={styles.des}>
            {rowData.title}
          </Text>
          ....
      </View>
</TouchableOpacity>

TouchableOpacity是一個點擊監聽組件，能夠綁定點擊事件。

<TouchableOpacity onPress={() => this.props.navigator.pop()}>
            <Image source={require('../imgs/back.png')} style={styles.back}/>
          </TouchableOpacity>

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

ListView

是否是感受很親切，它要實現的功能跟Android中是同樣的。可是使用方法就不一樣了哦。不過總體須要的數據原理仍是相似。無非也要整個的數據源，與綁定沒個Item的數據。

rowHasChanged

在渲染以前要設置判斷該數據是否須要重新渲染，這樣就減小許多沒必要要的渲染步驟，該方法能幫助咱們進行判斷。

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

cloneWithRows

爲listView初始化數據源,能夠經過state狀態來進行保存。

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

綁定

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

<ListView
            style={styles.container}
            dataSource={this.state.dataSource}
            renderRow={this._renderRow.bind(this)}/>
          </View>

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

_renderRow(rowData,sectionID,rowID,highlightRow){
    return(
    <TouchableOpacity onPress={() => this.props.navigator.push({
        title: '詳情',
        component: Detail,
        number: rowID,
      })}>
      <View style={styles.item}>
        <View style={styles.content}>
          <Text style={styles.des}>
            {rowData.title}
          </Text>
          <View style={styles.bottom}>
            <Text style={styles.fb}>
              {"發佈: "+rowData.fb}
            </Text>
            <Text style={styles.data}>
              {"日期: "+rowData.data}
            </Text>
          </View>
        </View>
        <Image style={styles.image}
        source={{uri: rowData.image}}/>
      </View>
      </TouchableOpacity>
    );
  }

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

這裏再簡單介紹下TabNavigator這是一個相似於Android中的FragmentTabHost。相信都知道它的功能是什麼了。

<TabNavigator>
        <TabNavigator.Item
          title="新聞"
          selected={this.state.selectedTab==='news'}
          selectedTitleStyle={styles.selectedText}
          titleStyle={styles.text}
          renderIcon={() => <Image source={require('../imgs/ic_news.png')} style={styles.image}/>}
          renderSelectedIcon={() => <Image source={require('../imgs/ic_news_pressed.png')} style={styles.image}/>}
          onPress={() => this.setState({selectedTab: 'news'})}>
          <News {...this.props}/>
        </TabNavigator.Item>
        ...
</TabNavigator>

經過<TabNavigator.Item>子標籤來設置每個底部Item，在其中在設置該Item要渲染的界面，上面的News就是要渲染的界面,該界面能夠經過export default News導出，import News from './News'導入。

先就介紹到這裏，若是還有須要能夠下載源碼,後續還會繼續再作擴展

效果圖

項目地址：https://github.com/idisfkj/RN...
我的blog：https://idisfkj.github.io

關注