React Native——使用導航Navigator and NavigatorIOS

jopen 8年前發布 | 81K 次閱讀移動開發 React Native

一、Navigator

1、簡單介紹：大多數時候我們都需要導航器來應對不同場景（頁面）間的切換。它通過路由對象來分辨不同的場景，我們這里采用的就是 renderScene 方法，根據指定的路由來渲染。

2、利用Navigator彈出用到的方法：

（1 initialRoute ={{ name: 'home', component: HomeScene }} 這個指定了默認的頁面，也就是啟動的組件頁面

(2 configureScene ={() => {

return Navigator. SceneConfigs .HorizontalSwipeJump;

}}

這個是頁面之間跳轉時候的動畫,可以看這個目錄:

node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳轉的時候的方向)

（3 renderScene ：兩個參數中的route包含的事initial的時候傳遞的name和component，而navigator是一個我們需要用的Navigator的對象，所以當我們拿到route中的component的時候，我們就可以將navigator傳遞給它，正因為如此，我們的組件HomeScene才可以通過 this.props.navigator，拿到路由。

（4 如果需要傳參數，則在push的參數后面加多一個參數 params ，把JSON往死填就好了，這里的params，其實就是在renderScene中return的{...route.params},這樣接收的頁面只需要通過this.props.id，就可以拿到我們傳遞的參數

（5 OK，那參數怎么回傳呢？回調！通過定義一個回調函數，利用this.props 去調用，把參數回傳回來

完整代碼：

/**
 * Sample React Native App
 * https://github.com/非死book/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

1、NavigatorIOS包裝了UIKit的導航功能，可以使用左劃功能來返回到上一界面。

2、同上包含的方法有：

push(route) - 導航器跳轉到一個新的路由。
pop() - 回到上一頁。
popN(n) - 回到N頁之前。當N=1的時候，效果和 pop() 一樣。
replace(route) - 替換當前頁的路由，并立即加載新路由的視圖。
replacePrevious(route) - 替換上一頁的路由/視圖。
replacePreviousAndPop(route) - 替換上一頁的路由/視圖并且立刻切換回上一頁。
resetTo(route) - 替換最頂級的路由并且回到它。
popToRoute(route) - 一直回到某個指定的路由。
popToTop() - 回到最頂層的路由。

代碼：

/**
 * Sample React Native App
 * https://github.com/非死book/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);

回調函數基本相同，但是注意還有一些對導航欄的控制，例如：

（1 barTintColor string

導航條的背景顏色。

（2 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"和任何其它的導航函數的參數都是這樣的路由對象。

（3 itemWrapperStyle View#style

導航器中的組件的默認屬性。一個常見的用途是設置所有頁面的背景顏色。

（4 navigationBarHidden bool

一個布爾值，決定導航欄是否隱藏。

（ 5 shadowHidden bool

一個布爾值，決定是否要隱藏1像素的陰影

（ 6 tintColor string

導航欄上按鈕的顏色。

（ 7 titleTextColor string

導航器標題的文字顏色。

（8 translucent bool

一個布爾值，決定是否導航條是半透明的。

來自： http://www.cnblogs.com/daomul/p/5125197.html

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1452698627776.html

移動開發 React Native

React Native——使用導航Navigator and NavigatorIOS

相關經驗

相關資訊

相關文檔

目錄