在 React-Native 中从 Android 上的抽屉引用导航器

Question

我试图从抽屉按钮推送到 Navigator 以更改视图，但反应给我以下错误：

undefined is not an object (evaluating '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>
        );

    }

Answer 1

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

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

函数：

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

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

在 React-Native 中从 Android 上的抽屉引用导航器

Referencing Navigator from Drawer on Android in React-Native

android

navigator

drawerlayout

react-native