導航 Navigator and NavigatorIOS的使用

Navigator

  • 簡單介紹：
    • 大多數時候我們都需要導航器來應對不同場景（頁面）間的切換。它通過路由對象來分辨不同的場景，我們這里采用的就是renderScene 方法，根據指定的路由來渲染。
  • 利用Navigator彈出用到的方法
  • 指定了默認的頁面，也就是啟動的組件頁面
initialRoute = {{ name: 'home', component: HomeScene }}
  • 頁面之間跳轉時候的動畫
configureScene = {() => {
　　return Navigator.SceneConfigs.HorizontalSwipeJump;　　  
}}
  • 可以看其他跳轉的時候的方向
node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
  • renderScene ：兩個參數中的route包含的事initial的時候傳遞的name和component，而navigator是一個我們需要用的Navigator的對象，所以當我們拿到route中的component的時候，我們就可以將navigator傳遞給它，正因為如此，我們的組件HomeScene才可以通過 this.props.navigator，拿到路由。
  • 如果需要傳參數，則在push的參數后面加多一個參數params，把JSON往死填就好了，這里的params，其實就是在renderScene中return的{...route.params},這樣接收的頁面只需要通過this.props.id，就可以拿到我們傳遞的參數
  • OK，那參數怎么回傳呢？回調！通過定義一個回調函數，利用this.props 去調用，把參數回傳回來
  • 完整代碼
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
var React = require('react-native');
//增加NavigatorIOS
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator,
    TouchableHighlight,
} = React;
  /*--  啟動組件 --*/
var MainClass = React.createClass({
  render: function() {
    //component這里設置的是這個組件啟動的時候顯示的第一個子組件
    return (
      <Navigator
          style= {styles.container}
          initialRoute= {{
            component: HomeScene,
            name: 'home'
          }}
          configureScene={() => {
              return Navigator.SceneConfigs.HorizontalSwipeJump;
          }}
          renderScene={(route, navigator) => {
            let Component = route.component;
            if(route.component) {
              return <Component {...route.params} navigator={navigator} />
            }
          }} >
      </Navigator>
    );
  },
});
/*--  首頁頁面組件 --*/
var HomeScene = React.createClass({
  getInitialState:function () {
    return {
      id: 'AXIBA001',
      flag: null
    };
  },
  render: function() {
    return (
      <View style={styles.home}>
        <TouchableHighlight onPress={this.onPress}>
          <Text>push me!{this.state.flag && ' I \'m ' + this.state.flag + ', i come from second page'}</Text>
        </TouchableHighlight>
      </View>
    );
  },
  onPress: function() {
    var _me = this;
    //或者寫成 const navigator = this.props.navigator;
    const { navigator } = this.props;
    if(navigator)
    {
        navigator.push({
            name: 'touch View',
            component: SecondScene,
            params: {
                id: this.state.id,
                getSomething:function(flag) {
                  _me.setState({
                    flag: flag
                  });
                }
            }
         })
    }
  }
});
/*--  push后的頁面組件 --*/
var SecondScene = React.createClass({
  render: function() {
    return (
      <View style={styles.home}>
        <TouchableHighlight onPress={this.onPress}>
          <Text>push sucess!I get {this.props.id},i want back!</Text>
        </TouchableHighlight>
      </View>
    );
  },
  onPress: function() {
    //或者寫成 const navigator = this.props.navigator;
    const { navigator } = this.props;
    if(this.props.getSomething) {
      var flag = 'Axiba002'
      this.props.getSomething(flag);
    }
    if(navigator) {
      navigator.pop();
    }
  }
});
/*布局樣式*/
var styles = StyleSheet.create({
    container: {
      flex: 1,
      // justifyContent: 'center',
      // alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    home: {
      paddingTop:74,
    },
});
AppRegistry.registerComponent('AwesonProject', () => MainClass);
  • 補充一些可能會用到的Navigator方法:
  • getCurrentRoutes() - 獲取當前棧里的路由，也就是push進來，沒有pop掉的那些。
  • jumpBack() - 跳回之前的路由，當然前提是保留現在的，還可以再跳回來，會給你保留原樣。
  • jumpForward() - 上一個方法不是調到之前的路由了么，用這個跳回來就好了。
  • jumpTo(route) - 跳轉到已有的場景并且不卸載。
  • push(route) - 跳轉到新的場景，并且將場景入棧，你可以稍后跳轉過去
  • pop() - 跳轉回去并且卸載掉當前場景
  • replace(route) - 用一個新的路由替換掉當前場景
  • replaceAtIndex(route, index) - 替換掉指定序列的路由場景
  • replacePrevious(route) - 替換掉之前的場景
  • immediatelyResetRouteStack(routeStack) - 用新的路由數組來重置路由棧
  • popToRoute(route) - pop到路由指定的場景，其他的場景將會卸載。
  • popToTop() - pop到棧中的第一個場景，卸載掉所有的其他場景。

NavigatorIOS

  • NavigatorIOS包裝了UIKit的導航功能，可以使用左劃功能來返回到上一界面
  • 同上包含的方法有：
  • push(route) - 導航器跳轉到一個新的路由。
  • pop() - 回到上一頁。
  • popN(n) - 回到N頁之前。當N=1的時候，效果和pop()一樣。
  • replace(route) - 替換當前頁的路由，并立即加載新路由的視圖。
  • replacePrevious(route) - 替換上一頁的路由/視圖。
  • replacePreviousAndPop(route) - 替換上一頁的路由/視圖并且立刻切換回上一頁。
  • resetTo(route) - 替換最頂級的路由并且回到它。
  • popToRoute(route) - 一直回到某個指定的路由。
  • popToTop() - 回到最頂層的路由。
  • 代碼demo：
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
var React = require('react-native');
//增加NavigatorIOS
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    NavigatorIOS,
    TouchableHighlight,
} = React;
/*有這樣一些需求？：自定義barBarItem，例如自定義名字、圖片？*/
  /*--  啟動組件 --*/
var MainClass = React.createClass({
  onRightButtonPress:function(){
    this.refs.nav.push({
      title: 'push view',
      component: SecondScene,
    });
  },
  render: function() {
    //component這里設置的是這個組件啟動的時候顯示的第一個子組件
    return (
      <NavigatorIOS ref='nav'
                    style= {styles.container}
                    initialRoute= {{
                      component: HomeScene,
                      title: 'home',
                      rightButtonTitle: 'more',
                      onRightButtonPress: this.onRightButtonPress,
                    }}>

      </NavigatorIOS>
    );
  },
});
/*--  首頁頁面組件 --*/
var HomeScene = React.createClass({
  render: function() {
    return (
      <View style={styles.home}>
        <TouchableHighlight onPress={this.onPress}>
          <Text>push me!</Text>
        </TouchableHighlight>
      </View>
    );
  },
  onPress: function() {
    this.props.navigator.push({
      title: 'touch View',
      component: SecondScene,
      passProps: { myProp: 'Axiba001' },
    });
  }
});
/*--  push后的頁面組件 --*/
var SecondScene = React.createClass({
  render: function() {
    return (
      <View style={styles.home}>
        <Text>push sucess!{'hi,this is prams:'+ this.props.myProp}</Text>
      </View>
    );
  },
});
/*布局樣式*/
var styles = StyleSheet.create({
    container: {
      flex: 1,
      // justifyContent: 'center',
      // alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    home: {
      paddingTop:74,
    },
});
AppRegistry.registerComponent('AwesonProject', () => MainClass);

補充（來自React-Native中文網的翻譯）

  • 回調函數基本相同，但是注意還有一些對導航欄的控制，例如:
  • barTintColor string
    導航條的背景顏色。
  • initialRoute {component: function, title: string, passProps: object, backButtonIcon: Image.propTypes.source, backButtonTitle: string, leftButtonIcon: Image.propTypes.source, leftButtonTitle: string, onLeftButtonPress: function, rightButtonIcon: Image.propTypes.source, rightButtonTitle: string, onRightButtonPress: function, wrapperStyle: [object Object]}
    NavigatorIOS使用"路由"對象來包含要渲染的子視圖、它們的屬性、以及導航條配置。"push"和任何其它的導航函數的參數都是這樣的路由對象。
  • itemWrapperStyle
    導航器中的組件的默認屬性。一個常見的用途是設置所有頁面的背景顏色。
  • navigationBarHidden bool *
    一個布爾值，決定導航欄是否隱藏。
  • shadowHidden bool
    一個布爾值，決定是否要隱藏1像素的陰影
  • tintColor string
    導航欄上按鈕的顏色。
  • titleTextColor string
    導航器標題的文字顏色。
  • translucent bool
    一個布爾值，決定是否導航條是半透明的。
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容