React Native之react-navigation动态修改标题、页面导航等

目录

 

1.navigation导航对象相关参数

1.1在当前Component获取navigation导航对象

1.2navigate方法

1.2.2使用示例

1.2.3源码

1.3params

1.4navigation的state属性

2.动态修改标题-title或者左右显示组件-headerRight

2.1动态修改标题

2.2动态修改左右显示组件-headerRight

2.3动态监听右侧组件点击事件

2.4动态设置标题剧中

---

1.navigation导航对象相关参数

1.1在当前Component获取navigation导航对象

const {state,params,navigate}=this.props.navigation;

1.2navigate方法

navigate方法参数，navigateTo：具体进入页面，params：传递给下一个页面具体参数，action：动作

1.2.2使用示例

const {navigate} = this.props.navigation;  //获取navigation的navigate方法
navigate(
'InspectionAndMaintenanceScene',  //必填，具体进入的下一个页面
{user:'111'}, //下一个界面接收的参数
//(advanced) The sub-action to run in the child router, if the screen is a navigator. Any one of the //actions described in this doc can be set as a sub-action.
//（高级）如果屏幕是导航器，要在子路由器中运行的子操作。此文档中描述的任何操作都可以设置为子操作。
NavigationActions.navigate({ routeName: 'WriteConfigInfoScene' })  //通常不需要配置

);

1.2.3源码

navigate: (navigateTo, params, action) => {
      if (typeof navigateTo === 'string') {
        return navigation.dispatch(
          NavigationActions.navigate({ routeName: navigateTo, params, action })
        );
      }
      invariant(
        typeof navigateTo === 'object',
        'Must navigateTo an object or a string'
      );
      invariant(
        params == null,
        'Params must not be provided to .navigate() when specifying an object'
      );
      invariant(
        action == null,
        'Child action must not be provided to .navigate() when specifying an object'
      );
      return navigation.dispatch(NavigationActions.navigate(navigateTo));
    },

1.3params

//导航去下一面

navigate(navigateTo, params, action)

//下一页面接收参数值

this.list = this.props.navigation.state.params.list;（list上一个界面传过来的key）

this.commands = this.props.navigation.state.params.testCommands;（testCommands上一个界面传过来的key）

1.4navigation的state属性

state.key：配置要返回指定的的页面

 goBack: key => {
      let actualizedKey = key;
      if (key === undefined && navigation.state.key) {
        invariant(
          typeof navigation.state.key === 'string',
          'key should be a string'
        );
        actualizedKey = navigation.state.key;
      }
      return navigation.dispatch(
        NavigationActions.back({ key: actualizedKey })
      );
    },

state.params：接收上一个界面传过来的参数

2.动态修改标题-title或者左右显示组件-headerRight

2.1动态修改标题

只需要把下面的界面放置到修改的页面中即可动态修改标题和标题栏样式

title: navigation.state.params.user,修改标题属性；

navigation.state.params.user获取上一个界面过来的{user:'111'}参数设置为标题

//当前视图自定义标题栏目，默认执行
    static navigationOptions = ({navigation,screenProps}) => {
        return ({
                headerStyle:{backgroundColor:'#6486f7'},
                title: navigation.state.params.user,
                headerTitleStyle:{color:'#fff', fontSize:Constants.BigFonntSize,flex: 1,textAlign:'center'},
                headerBackImage:require('../../image/back.png'),
                headerRight:navigation.state.params.navigatePress()}>断开
        });
    };

2.2动态修改左右显示组件-headerRight

headerRight:navigation.state.params.navigatePress()}>

断开

2.3动态监听右侧组件点击事件

不可以这样设置onPress()=>this.unConnect

需要如下设置监听右侧组件点击事件：

a. onPress={()=>navigation.state.params.navigatePress()}

b.关联当前组件的unconnect()

 componentDidMount() {

//在static中使用this方法，这样设置以后就可以关联当前组件的unconnect()方法
this.props.navigation.setParams({ navigatePress:this.unConnect });

 }

unconnect=()=>{}

2.4动态设置标题剧中

headerTitleStyle:{color:'#fff', fontSize:Constants.BigFonntSize,flex: 1,textAlign:'center'},

设置：flex:1,textAlign:'center'属性即可标题剧中

 

 

参考：

https://blog.csdn.net/weixin_34255055/article/details/87118849

7.React Native之StackNavigator实现页面跳转及navigationOptions参数说明；

https://blog.csdn.net/ahou2468/article/details/87625428#2.StackNavigator属性介绍

8.React Native之StackNavigator和TabNavigator结合使用

https://blog.csdn.net/ahou2468/article/details/88117343