Question

我正在使用react-native构建POC应用程序并尝试实现react-navigation

import {StackNavigator, DrawerNavigator} from 'react-navigation';

export default class HomeScreen extends React.Component {
    constructor(props) {
        super(props)
        this.clicked = this.clicked.bind(this)
    }

    static navigationOptions = {
        drawerLabel: 'Home',
    };

    clicked = ()=> {
        this.props.navigator.navigate('DrawerOpen'); // open drawer
    }

    render() {
        // const {navigate} = this.props.navigation;
        return (
            <ScrollView>
                <View style={styles.container}>

                    <View style={styles.header}>
                        <View style={{width: 50}}>
                            <TouchableHighlight onPress={()=> {
                                this.clicked("DrawerOpen")
                            }}>
                                <Image source={require('./img/hamburger_icon.png')}/>
                            </TouchableHighlight>
                        </View>
                    </View>
               </View>
           </ScrollView >
       )
    }
 }

现在每当我点击可触摸的高亮显示时，点击的功能都会被调用并显示错误：

undefined is not an object (evaluating '_this.props.navigator.navigate')
clicked

Answer 1

你试试吧:)

 import {StackNavigator, DrawerNavigator} from 'react-navigation';

    export default class HomeScreen extends React.Component {

        static navigationOptions = {
            drawerLabel: 'Home',
        };

        clicked = () => {
            this.props.navigation.navigate('DrawerOpen'); // open drawer
        }

        render() {
            // const {navigate} = this.props.navigation;
            return (
                <ScrollView>
                    <View style={styles.container}>

                        <View style={styles.header}>
                            <View style={{width: 50}}>
                                <TouchableHighlight onPress={()=>
                                    this.clicked()
                                }>
                                    <Image source={require('./img/hamburger_icon.png')}/>
                                </TouchableHighlight>
                            </View>
                        </View>
                   </View>
               </ScrollView >
           )
        }
     }

Answer 2

试试这个，可能这可以帮助你，在点击的

内

clicked = ()=> {
    this.props.navigation.navigate('DrawerOpen'); 
}

Answer 3

这恰好发生在我身上。只有顶级组件才能获得this.props.navigation。

可能你必须像这样调用这个组件：

<HomeScreen navigation=this.props.navigation />

react-navigation不起作用，道具未定义

3 个答案: