undefined 不是一个对象(评估'_this3.props.navigation.navigate') [英] undefined is not an object (evaluating '_this3.props.navigation.navigate')

问题描述

屏幕之间的堆栈导航问题.我在SveKategorije"屏幕上显示数据.它基本上是类别按钮，当我单击按钮时，我现在只想显示另一个屏幕，但由于某种原因它不起作用.当我把 onPress={() => this.props.navigation.navigate('screenname')}它给了我这个错误我正在使用 (react-native - 0.57.7)

Problem with stack navigation between the screens. I am displaying data on my 'SveKategorije' screen. It's basically categories buttons, when i click on button i just want to show another screen for now, but it is not working for some reason. When i put onPress={() => this.props.navigation.navigate('screenname')} it gives me this error I am using (react-native - 0.57.7)

这是 router.js 代码(我在这里声明我的路由)

Here is router.js code (where i declare my routes)

import React from 'react';
import { View, Text, Button } from "react-native";
import { createBottomTabNavigator, createStackNavigator } from "react-navigation";
import { Icon } from 'react-native-elements';

//TABS
import Categories from '../tabs/categories';
import Home from '../tabs/home';
import Me from '../tabs/me';

//screens for CATEGORIES 
import ViceviPoKategoriji from '../components/Ispis/ViceviPoKategoriji';


//CATEGORIES STACK 
export const categoriesFeedStack = createStackNavigator({

    SveKategorije: {
        screen: Categories,
        navigationOptions: {
            title: 'KATEGORIJE',
        },
    },

    ViceviPoKategoriji: {
        screen: ViceviPoKategoriji,
    }

});


//TABS
export const Tabs = createBottomTabNavigator({


    Categories: {
        screen: categoriesFeedStack,
        navigationOptions: {
            title: 'Kategorije',
            label: 'Kategorije',
            tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />,
        }

    },
    Home: {
        screen: Home,
        navigationOptions: {
            title: 'Pocetna',
            label: 'Kategorije',
            tabBarIcon: ({ tintColor }) => <Icon name="home" size={35} color={tintColor} />,
        }

    },
    Me: {
        screen: Me,
        navigationOptions: {
            title: 'Profil',
            label: 'Kategorije',
            tabBarIcon: ({ tintColor }) => <Icon name="account-circle" size={35} color={tintColor} />,
        }
    },

},
    {
        initialRouteName: "Home",
        showIcon: true
    },

);

这是SveKategorije"屏幕

Here is 'SveKategorije' screen

import React from 'react';
import { StyleSheet, Text, View, ActivityIndicator, ScrollView, Button } from 'react-native';
import { createStackNavigator, createAppContainer, StackNavigator, navigate } from 'react-navigation';


export default class SveKategorije extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: null
        }
    }




    componentDidMount() {
        return fetch('http://centarsmijeha.com/api/allCategories')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    dataSource: responseJson.data,
                })
            })
            .catch((error) => {
                console.log(error)
            });
    }
    render() {

        if (this.state.isLoading) {
            return (
                <View style={styles.container}>
                    <ActivityIndicator />
                </View>
            )
        } else {
            let data = this.state.dataSource.map((val, key) => {

                return (
                    <View key={key} style={styles.item}>

                        <Button
                            onPress={() => this.props.navigation.navigate('ViceviPoKategoriji')}
                            title={val.categoryName}
                        />
                    </View>
                );

            });
            return (
                <ScrollView>

                    {data}
                </ScrollView >
            );
        }
    }
}




//CSS
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%'
    },
    item: {
        flex: 1,
        alignSelf: 'stretch',
        width: '100%',
        textAlign: 'center',
        alignItems: 'center',
        justifyContent: 'center'
    }
});

这里是ViceviPoKategoriji"屏幕(点击SveKategorije"屏幕上的任何按钮时应显示的屏幕)

and here is 'ViceviPoKategoriji' screen ( the screen that should be displayed on click of any buttons from 'SveKategorije' screen )

import React from 'react';
import { StyleSheet, Text, View, ActivityIndicator, ScrollView } from 'react-native';


export default class ViceviPoKategoriji extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: null,
        }
    }
    componentDidMount() {
        return fetch('http://centarsmijeha.com/api/jokesByCategory/16')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    dataSource: responseJson.data,
                })
            })
            .catch((error) => {
                console.log(error)
            });
    }
    render() {
        if (this.state.isLoading) {
            return (
                <View style={styles.container}>
                    <ActivityIndicator />
                </View>
            )
        } else {
            let data = this.state.dataSource.map((val, key) => {

                return <View key={key} style={styles.item}><Text>{val.jokeText}</Text></View>

            });
            return (
                <ScrollView>

                    {data}
                </ScrollView >
            );
        }
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    item: {
        flex: 1,
        alignSelf: 'stretch',
        marginTop: 50,
        marginRight: '15%',
        marginLeft: '15%',
        width: '70%',
        textAlign: 'center',
        alignItems: 'center',
        justifyContent: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#eee'
    }
});

推荐答案

React-navigation 是基于 props 的导航.我认为您的组件没有导航道具.请检查您的组件是否有导航道具.

React-navigation is props based navigation. I think your component don't have navigation props. Please check whether your component have navigation props.

做

render() {
  console.log(this.props.navigation)
  // or debugger
  return (

如果 console.log 的结果未定义，则将import SveKategorije"添加到您的路由文件中.

If result of console.log is undefined, then add 'import SveKategorije' to your routing file.

这篇关于undefined 不是一个对象(评估'_this3.props.navigation.navigate')的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！