1.3.1 • Published 5 years ago
react-navigation-props-helper v1.3.1
react-navigation-props-helper
安装
yarn add react-navigation-props-helper 或 npm install --save react-navigation-props-helper
怎么使用?
NavigatorPush
1、跳转路由:NavigatorPush.navigate('TestPage', {userName:'userName', pwd:'pwd'}); //跳转路由
2、回退路由:NavigatorPush.goBack();
3、设置参数:NavigatorPush.setParameters({test:{key:'value'}}); //当前路由设置参数
import {NavigatorPush} from 'react-navigation-props-helper';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<RootView ref={navigatorRef => { NavigatorPush.setTopLevelNavigator(navigatorRef); }}/> //保存navigator的引用
{/*<VideoPlayScreen url={'http://vodstztfqk4.vod.126.net/vodstztfqk4/3c901b47-0fc0-4490-9c2d-76b13465d4c4.mp4'}/>*/}
</View>
);
}
}
withMappedNavigationProps
import React,{Component} from 'react';
import { View,StatusBar } from 'react-native';
import {observer} from 'mobx-react';
import { NavigatorPush,withMappedNavigationProps } from 'react-navigation-props-helper'
@withMappedNavigationProps
@observer
export default class TestPage extends Component {
componentDidMount() {
NavigatorPush.setParameters({test:{key:'value'}}); //当前路由设置参数
console.log('componentDidMount');
}
render() {
const {userName, pwd,test,navigation} = this.props;
console.log('render:',userName, pwd,test,navigation);
return(
<View style={{flex:1}}>
<StatusBar hidden={false} barStyle={'dark-content'} translucent={false} backgroundColor={'white'}/>
</View>
);
}
}
routeInterceptor
拦截路由,比如某些页面需要登录才可以访问
NavigatorPush.routeInterceptor = (routeName, params) => {
if (needLoginPage.indexOf(routeName) !== -1) {
NavigatorPush.navigate('TestPage1',params);
return false;
}
console.log('routeName',routeName);
return true;
};
说明须知
如果你使用了mobx的observer注解,解决办法就是把@observer放下面,以免mobx失效; react-navigation版本3.0.0以上。