React-native Callback从父级获取子导航器的道具

I'm trying to access route.id of my Navigator from his parent container to be able to hide/show a depending on Navigators route.id

我正在尝试从他的父容器访问我的Navigator的route.id,以便能够隐藏/显示取决于Navigators route.id

I believe child to parent communications would need a callback function, here is my attempt.

我相信孩子对父母的沟通需要一个回调函数,这是我的尝试。

var Home = require('./Home');
var Navigation = require('./Navigation');

class Parent extends Component {
    render() {
        return (
            <View style={styles.appContainer}>
                <Navigation getNavigator={this.getNavigator.bind(this)}/>
                <Footer />
            </View>
        );
    }
}

And here is the child component

这是儿童组成部分

var _navigator; 

class Navigation extends Component {
    getNavigator(route){
        return this.refs.navigator.push(route);
    }
    render() {
        return (
            <Navigator
            style={styles.container}
            ref={(navigator) => { this.navigator = navigator; }}
            initialRoute={{
                    id: 'Home',
                    index:0,
                }}
            renderScene={this.navigatorRenderScene}
            configureScene={(route) => {
                if (route.sceneConfig) {
                    return route.sceneConfig;
                }
                return Navigator.SceneConfigs.PushFromRight;
            }}
            navigationBar={
                <NavigationBar
                style={{backgroundColor: '#f5f6f8'}}
                routeMapper={NavigationBarRouteMapper} />
            }
            />
        );
    }
    navigatorRenderScene(route, navigator) {
        _navigator = navigator;
        switch (route.id) {
            case 'Home':
                return (<Home navigator={navigator}  {...route.passProps}  title="Home" />);
                ...     
        }
    }
}

2 个解决方案

#1

The problem you have is that you may not have two this in a method. You bind the this from the parent, so this within getNavigator is the this from the parent. In this this no refs.navigator exists, this is why it doesn't work.

你遇到的问题是你在方法中可能没有两个。你从父节点绑定它,所以getNavigator中的这个来自父节点。在这里,没有refs.navigator存在,这就是为什么它不起作用。

The way you would normally implement is having the Navigator as the top most component and passing a navigateTo method in the props of the children (or the context). If you would still like to navigate from the parent in the child you have two options:

通常的方法是将Navigator作为最顶层的组件,并在子项(或上下文)的props中传递navigateTo方法。如果您仍想从孩子的父母导航,您有两个选择:

Add redux and have a route store, the parent dispatches an action, that the child fulfils in the componentDidReceiveProps method.

添加redux并有一个路由存储,父命令调度一个动作,子动作在componentDidReceiveProps方法中完成。

You may add methods to be called from a ref of your navigator component. This would be similar to the approach used in DrawerLayoutAndroid. You may have a look at the React Native implementation to see how that works, or you may look at the polyfill here.

您可以添加要从导航器组件的ref中调用的方法。这与DrawerLayoutAndroid中使用的方法类似。您可以查看React Native实现以了解其工作原理,或者您可以在此处查看polyfill。

#2

There is an easier way to obtain a reference to the navigator object in the context that instantiates the component, without the use of a callback to set it manually.

有一种更简单的方法可以在实例化组件的上下文中获取对导航器对象的引用,而无需使用回调来手动设置它。

Include a "ref" property in your navigator like this:

在导航器中包含“ref”属性,如下所示:

render() {
    return (
        <View style={{flex: 1}}>
            <Navigator
                ref="mainNavigator"
                initialRoute={initialStack[0]}
                renderScene={this.renderScene.bind(this)} />
            </View>
        );
}

Access it later in relevant functions via the component's refs property:

稍后通过组件的refs属性访问相关函数:

componentDidMount() {
    alert(this.refs.mainNavigator); // [Object] [object]
}

#1