在 React-Native 中从 Android 上的 Drawer 引用 Navigator答案

【问题标题】：Referencing Navigator from Drawer on Android in React-Native在 React-Native 中从 Android 上的 Drawer 引用 Navigator
【发布时间】：2015-12-17 20:44:35
【问题描述】：

我正在尝试从抽屉按钮推送到 Navigator 以更改视图，但 react 给了我以下错误：

undefined 不是对象（评估 'this.refs['NAV'].push'）

这是同时具有 Navigator 和 DrawerLayoutAndroid 的代码

    _renderScene(route, navigator) {
        if(route.id === 1){
            return <Checklist checklist={this.props.checklist}/>
        }else if(route.id === 2){
            return <Documents documents={this.props.documents}/>
        }else if(route.id === 3){
            return <Help refs={this.refs}  questions={this.props.questions} faqs={this.props.faqs}/>
        }else if(route.id === 4){
            return <Hospitals refs={this.refs}  hospitals={this.props.hospitals}/>
        }else if(route.id === 5){
            return <Profile refs={this.refs}  logout={this.props.logout} profile={this.props.profile} guarantor={this.props.guarantor}/>
        }
    },


    render() {

        console.log(this.refs)

        var navigationView = (
            <View style={{flex: 1, backgroundColor: '#fff'}}>
                <TouchableOpacity onPress={this.refs['NAV'].push({id: 2})}>
                    <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>Checklist</Text>
                </TouchableOpacity>
                <TouchableOpacity >
                    <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>Documents</Text>
                </TouchableOpacity>
            </View>
        );

        return (
            <DrawerLayoutAndroid
            drawerWidth={300}
            ref={'DRAWER_REF'}
            drawerPosition={DrawerLayoutAndroid.positions.Left}
            renderNavigationView={() => navigationView}>
                <Navigator
                initialRoute={{id: 1}}
                renderScene={this._renderScene}
                ref={'NAV'}
                />
            </DrawerLayoutAndroid>
        );

    }

【问题讨论】：

标签： android react-native drawerlayout navigator

【解决方案1】：

问题是我需要在创建引用后调用一个函数。

<TouchableOpacity onPress={this._change.bind(this, 2)}>

功能：

_change(route){
    this.refs.ref1.push({id: route})
},

【讨论】：

值得一提的是，ref1 是之前代码中的NAV。无论如何，非常感谢你的代码，它对我帮助很大

【解决方案2】：

感谢您的示例。

我已修复 this.refs['NAV'].push({id: route}); 并添加了 closeDrawer() 以在选择选项后关闭抽屉。

这里是工作状态：

_renderScene(route, navigator) {
    if(route.id === 1){
        return <Checklist checklist={this.props.checklist}/>
    }else if(route.id === 2){
        return <Documents documents={this.props.documents}/>
    }else if(route.id === 3){
        return <Help refs={this.refs}  questions={this.props.questions} faqs={this.props.faqs}/>
    }else if(route.id === 4){
        return <Hospitals refs={this.refs}  hospitals={this.props.hospitals}/>
    }else if(route.id === 5){
        return <Profile refs={this.refs}  logout={this.props.logout} profile={this.props.profile} guarantor={this.props.guarantor}/>
    }
}

_change(route){
  this.refs['NAV'].push({id: route});
  this.refs['DRAWER_REF'].closeDrawer();
}

render() {

    var navigationView = (
        <View style={{flex: 1, backgroundColor: '#fff'}}>
            <TouchableOpacity onPress={this._change.bind(this, 1)}>
                <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>Checklist</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={this._change.bind(this, 2)}>
                <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>Documents</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={this._change.bind(this, 3)}>
                <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>Help</Text>
            </TouchableOpacity>
        </View>
    );

    return (
        <DrawerLayoutAndroid
        drawerWidth={300}
        ref={'DRAWER_REF'}
        drawerPosition={DrawerLayoutAndroid.positions.Left}
        renderNavigationView={() => navigationView}>
            <Navigator
            initialRoute={{id: 1}}
            renderScene={this._renderScene}
            ref={'NAV'}
            />
        </DrawerLayoutAndroid>
    );
}

【讨论】：