React-native 回调从 parent 获取 child 导航器的道具

Question

我正在尝试从他的 parent 容器访问我的 Navigator route.id，以便能够 hide/show a 取决于 Navigators route.id

我相信child到parent的通讯需要一个回调函数，这里是我的尝试。

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

这里是 child 组件

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 方法。如果您仍想从子项中的父项导航，您有两个选择：

添加 redux 并有一个路由存储，父级调度一个动作，子级在 componentDidReceiveProps 方法中完成。
您可以添加要从导航器组件的引用中调用的方法。这类似于 DrawerLayoutAndroid 中使用的方法。您可以查看 React Native 实现以了解其工作原理，或者 you may look at the polyfill here.

Answer 2

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

像这样在导航器中包含 "ref" 属性：

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

稍后通过组件的引用在相关函数中访问它属性:

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

React-native 回调从 parent 获取 child 导航器的道具

React-native Callback get props of child navigator from parent

navigator

react-native