反应原生回调从父级获取子导航器的道具

Question

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

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

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>
        );
    }
}

这是子组件

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" />);
                ...     
        }
    }
}

Answer 1

您遇到的问题是方法中可能没有两个this。绑定来自父项的this，因此getNavigator this是来自父项的this。在这个this不存在refs.navigator，这就是它不起作用的原因。

您通常实现的方式是将 Navigator 作为最顶层的组件，并在子项（或上下文）的 props 中传递navigateTo方法。如果您仍想从子项中的父项导航，则有两种选择：

1. 添加 redux 并具有路由存储，父级调度一个操作，子级在 componentDidReceiveProps 方法中完成该操作。
2. 您可以添加要从导航器组件的引用调用的方法。这将类似于DrawerLayoutAndroid中使用的方法。你可以看看 React Native 实现，看看它是如何工作的，或者你可以在这里看看 polyfill。

Answer 2

有一种

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

在导航器中包含"ref"属性，如下所示：

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

稍后通过组件的 refs 属性在相关函数中访问它：

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