Question

我正在尝试从他的父容器访问我的Navigator的route.id，以便能够隐藏/显示取决于Navigators 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，因此this中的getNavigator是来自父级的this。在此this中没有refs.navigator存在，这就是它无效的原因。

您通常采用的方式是将导航器作为最重要的组件，并在子项（或上下文）的道具中传递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>
        );
}

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

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

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

2 个答案: