Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-navigator-helper with all npm packages installed. Try it out:

var reactNavigatorHelper = require("react-navigator-helper")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-navigator-helper v1.0.1

用于简化react-navigation的props属性获取以及组件切换操作。

react-navigation-helper

安装

yarn add react-navigator-helper 或 npm install --save react-navigator-helper

怎么使用?


RootView

import { NavigatorPush } from 'react-navigator-helper'
<RootView ref={navigatorRef => { NavigatorPush.setTopLevelNavigator(navigatorRef); }}/>  //保存navigator的引用
NavigatorPush.navigate('TestPage', {userName:'userName', pwd:'pwd'}); //跳转路由


TestPage

import React,{Component} from 'react';
import {
    View,StatusBar
} from 'react-native';
import {observer} from 'mobx-react';

import { NavigatorPush,withMappedNavigationProps,withMappedNavigationAndConfigProps } from 'react-navigator-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);
        console.log('componentName',this.constructor.name);

        return(
            <View style={{flex:1}}>
                <StatusBar hidden={false} barStyle={'dark-content'} translucent={false} backgroundColor={'white'}/>
            </View>
        );
    }
}

解释一下

如果你使用了mobx的observer注解,解决办法就是把@observer放下面,以免mobx失效。

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free