Question

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

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

    }

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上的Drawer引用Navigator

2 个答案: