使用react-native中的Navigator組件進行頁面導航

最近對React比較感興趣，然后愛屋及烏，也研究了下React-Native, 后面簡稱為RN。

RN剛發布時，Facebook官方說為了快速發布，我們暫時只支持在MacOS上使用， 其他操作系統會慢慢支持。這可讓那些用不起Mac的程序員苦逼了。。還好還好，最近RN發布了0.13.0版本了，已經兌現了對windows的支持，所以廣大的程序猿們可以在windows上利用RN開發Android應用啦。。至於開發iOS應用，呵呵，還是不要想了，調試還是需要模擬器的嘛。。關於Android環境的搭建可以參考

《Windows下搭建React Native Android開發環境》一文，不過作者提到需要修改react-native里面的代碼就不必要了，因為那些問題都已經修正了。所以你就大膽的使用的。就幾句話：

npm install react-native-cli -g   #安裝react-native控制台工具

react-native init AwesomeProject #初始化一個項目

react-native start  #運行服務，用於生成js bundle

ract-native run-android #在手機上或者模擬器上運行android應用

 

廢話少說，進入我們今天的主題：如果在RN中使用Navigator。 首先的問題是：何為Navigator?  從字面意思上來說，就是導航了。通俗點講，就是說一個頁面跳轉到另外一個頁面，相當於是頁面的控制器。如果大家稍微熟悉下Android的開發，就知道，在Android中一個頁面就是一個Activity，然后通過Intent,我們可以跳轉到另外一個Activity。我們想要的就是這種效果。那我們該怎么辦呢？

 

參考RN的官方文檔， 我們知道有Navigator這么一個玩意，但是官方文檔比較晦澀，不知道寫的些啥，所以還是自己慢慢google吧，苦逼呀。。。

 

找了一圈，終於有點眉目，其實還是比較簡單的，我們看一個render方法：

    render() {
        return (
            <Navigator
                initialRoute={{name: 'welcome'}}
                configureScene={this.configureScene}
                renderScene={this.renderScene} />
        );
    }

上面代碼里面的 Navigator就是控制頁面跳轉的，像一個路由的似的，可以控制頁面的流轉。但是其他屬性都是些什么玩意？我來一個一個分析說明。

 

initialRouter: 路由初始化配置信息，就是說頁面加載時，第一次需要展現什么內容

configureScene: 場景轉換動畫配置。在RN看來，從一個頁面切換到另外一個頁面，就是從一個場景切換到另外一個場景，這里配置的是場景動畫信息，比如Navigator.SceneConfigs.FadeAndroid 就是淡入淡出

renderScene: 渲染場景，讀取initialRouter傳來的數據，確定顯示那些內容。

我們上代碼：

var React = require('react-native');
var {
　　AppRegistry,
　　View,
　　Navigator,
　　Text,
　　BackAndroid,
　　StyleSheet
} = React;

 

var SampleApp = React.createClass({

    configureScene(route){
      return Navigator.SceneConfigs.FadeAndroid;
    },

    renderScene(router, navigator){
      var Component = null;this._navigator = navigator;
      switch(router.name){
        case "welcome":
          Component = WelcomeView;
          break;
        case "feed":
          Component = FeedView;
          break;
        default: //default view
          Component = DefaultView;
      }

      return <Component navigator={navigator} />
    },

    componentDidMount() {
      var navigator = this._navigator;
      BackAndroid.addEventListener('hardwareBackPress', function() {
          if (navigator && navigator.getCurrentRoutes().length > 1) {
            navigator.pop();
            return true;
          }
          return false;
      });
    },


    componentWillUnmount() {
      BackAndroid.removeEventListener('hardwareBackPress');
    },

    render() {
        return (
            <Navigator
                initialRoute={{name: 'welcome'}}
                configureScene={this.configureScene}
                renderScene={this.renderScene} />
        );
    }

});

AppRegistry.registerComponent('AwesomeProject', () => SampleApp);

 

從代碼可以看到， initialRouter傳入的是{name:'welcome'}, 然后configureScene返回的是 Navigator.SceneConfigs.FadeAndroid，表示從一個頁面切換到另外一個頁面時，動畫效果是淡入淡出。然后最重要的是renderScene， 組件會這給這個函數傳入兩個參數，一個是router，路由信息；另外一個navigator對象。 我們可以通過router里面的數據來渲染指定的內容。其他View代碼如下所示：

 

var FeedView = React.createClass({
    goBack(){
      this.props.navigator.push({name:"default"});
    },

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome} onPress={this.goBack} >
                    I am Feed View! Tab to default view!
                </Text>
            </View>  
        )
    }
});


var WelcomeView = React.createClass({
    onPressFeed() {
        this.props.navigator.push({name: 'feed'});
    },


    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome} onPress={this.onPressFeed} >
                    This is welcome view.Tap to go to feed view.
                </Text>
            </View>
        );
    }

});

var DefaultView = React.createClass({

    render(){
      return (
          <View style={styles.container}>
              <Text style={styles.welcome}>Default view</Text>
          </View>
      )
    }
});

 

從一個頁面跳轉到另外一個頁面如何實現？  很簡單，在renderScene方法中，我們渲染組件時，給組件傳遞了一個navigator屬性，在組件中調用 this.props.navigator.push就可以跳轉到指定的頁面。注意傳入的參數。調用this.props.navigator.push方法，  renderScene會再次執行，然后渲染對應的組件。  如果希望返回上一個頁面，調用 this.props.navigator.pop即可。

 

完整的代碼可以訪問 https://gist.github.com/flyingzl/3188e8e5dfa49e68432b

 

效果預覽訪問 https://rnplay.org/apps/D4QP9A