导航 Navigator and NavigatorIOS的使用==》传递参数

最新推荐文章于 2023-12-02 19:01:26 发布

barnett_y

最新推荐文章于 2023-12-02 19:01:26 发布

阅读量944

点赞数

分类专栏：【React-Native2点滴知识】

【React-Native2点滴知识】专栏收录该内容

698 篇文章

订阅专栏

本文详细介绍了React Native中Navigator和NavigatorIOS组件的使用方法，包括页面之间的跳转、参数传递及回调等关键操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
一个布尔值，决定是否导航条是半透明的。