Question

我正在尝试将一个简单的抽屉和导航装置反应原生。

如您所见，我导入抽屉，然后在工具栏下面实例化导航器。

我希望能够从AppDrawer更改路线，但是按钮点击后我唯一能得到的是

* undefined不是一个函数（评估＆＃39; _this2.props.navigator.push（{id：＆＃39; component5＆＃39;}）＆＃39;）* < / p>

注意：我没有附加组件3或5代码，因为它们是简单的文本渲染。

index.android.js

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, View, Navigator, ToolbarAndroid} from 'react-native';

import Component3 from "./app/components/Component3/Component3";
import Component5 from "./app/components/Component5/Component5";


import MyAppDrawer from "./app/components/Miscellaneous/AppDrawer";
import Drawer from 'react-native-drawer';


const drawerStyles = {
    drawer: {
        shadowColor: "#343477",
        shadowOpacity: 0.8,
        shadowRadius: 0,
    }
}


export default class ReactTest extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
            drawerType: 'overlay',
            openDrawerOffset: 50,
            closedDrawerOffset: 0,
            panOpenMask: .1,
            panCloseMask: .9,
            relativeDrag: false,
            panThreshold: .25,
            tweenHandlerOn: false,
            tweenDuration: 350,
            tweenEasing: 'linear',
            disabled: false,
            tweenHandlerPreset: null,
            acceptDoubleTap: false,
            acceptTap: false,
            acceptPan: true,
            tapToClose: false,
            negotiatePan: false,
            rightSide: false,
        };
    }


    openDrawer() {
        this.drawer.open()
    }


    renderScene(route, navigator) {
        switch (route.id) {
            case 'component2':
                return (<Component2 navigator={navigator}/>)
            case 'component3':
                return (<Component3 navigator={navigator}/>)
            case 'component4':
                return (<Component4 navigator={navigator}/>)
            case 'component5':
                return (<Component5 navigator={navigator} title="component5"/>)
            case 'component6':
                return (<Component6 user={route.user} navigator={navigator} title="component6"/>)
        }
    }

    onActionSelected(position) {
        console.log("Settings clicked");
    }

    onIconClicked(position) {
        console.log("App Drawer clicked");
    }


    render() {
        var controlPanel = <MyAppDrawer navigator={navigator} closeDrawer={() => {
            this.drawer.close();
        }}/>
        return (


            <View style={styles.containerToolbar}>


                <Drawer
                    ref={c => this.drawer = c}
                    type={this.state.drawerType}
                    animation={this.state.animation}
                    captureGestures={true}
                    openDrawerOffset={this.state.openDrawerOffset}
                    closedDrawerOffset={this.state.closedDrawerOffset}
                    panOpenMask={this.state.panOpenMask}
                    //panCloseMask={this.state.panCloseMask}
                    relativeDrag={this.state.relativeDrag}
                    panThreshold={this.state.panThreshold}
                    content={controlPanel}
                    styles={drawerStyles}
                    disabled={this.state.disabled}
                    // tweenHandler={this.tweenHandler.bind(this)}
                    // tweenDuration={this.state.tweenDuration}
                    // tweenEasing={this.state.tweenEasing}
                    acceptDoubleTap={this.state.acceptDoubleTap}
                    acceptTap={this.state.acceptTap}
                    acceptPan={this.state.acceptPan}
                    tapToClose={this.state.tapToClose}
                    negotiatePan={this.state.negotiatePan}
                    // changeVal={this.state.changeVal}
                    side={this.state.rightSide ? 'right' : 'left'}
                >
                    <ToolbarAndroid
                        style={styles.toolbar}
                        title="MyApp"
                        // logo={require('./dummy_logo.png')}
                        navIcon={require("./navigation_icon.png")}
                        onActionSelected={this.onActionSelected}
                        onIconClicked={this.openDrawer.bind(this)}
                        titleColor="black"
                        actions={[
                            {title: "Log out", show: "never"}
                        ]}
                    />
                    <Navigator
                        style={styles.container}
                        initialRoute={{id: 'component3'}}
                        renderScene={this.renderScene}/>
                </Drawer>

            </View>
        );
    }


}
const styles = StyleSheet.create({
    containerToolbar: {
        flex: 1,
        //justifyContent: 'center',
        justifyContent: 'flex-start',
        // https://github.com/facebook/react-native/issues/2957#event-417214498
        alignItems: 'stretch',
        backgroundColor: '#F5FCFF',
    },
    toolbar: {
        backgroundColor: '#e9eaed',
        height: 56,
    },

});


AppRegistry.registerComponent('ReactTest', () => ReactTest);

AppDrawer.js

导入React，{Component}来自＆＃39;反应＆＃39 ;; 从＆＃39; react-native＆＃39 ;;

导入{View，Text，Button，Navigator}

import styles from './styles';

export default class AppDrawer extends Component {
    constructor() {
        super();
    }

    render() {
        return (
            <View style={styles.controlPanel}>
                <Text style={styles.controlPanelWelcome}>
                    Control Panel
                </Text>
                <Button
                    onPress={() => {
                        console.log("pressed");
                        this.props.navigator.push({
                            id: 'component5',
                        });
                    }}  
                    title="Component 5"
                />
            </View>
        )
    }
}

Answer 1

由于您在renderScene函数中没有MyAppDrawer，因此您无法访问导航器。您需要添加一个ref并使用它来获取导航器：

将ref={navigator => this.navigator = navigator}添加到您的导航器组件，然后您可以

<MyAppDrawer navigator={this.navigator} closeDrawer={() => {
    this.drawer.close();
}}/>

undefined不是评估_this2.props.navigator.push

1 个答案: