undefined 不是一個對象（評估'_this3.props.navigation.navigate'）

Question

屏幕之間的堆棧導航問題。 我在“SveKategorije”屏幕上顯示數據。 它基本上是類別按鈕，當我單擊按鈕時，我現在只想顯示另一個屏幕，但由於某種原因它不起作用。 當我把 onPress={() => this.props.navigation.navigate('screenname')} 它給我這個錯誤我正在使用（反應原生 - 0.57.7）

這是 router.js 代碼（我在這里聲明我的路由）

 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”屏幕

 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”屏幕上的任何按鈕時應顯示的屏幕）

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

Answer 1

React-navigation 是基於 props 的導航。 我認為您的組件沒有導航道具。 請檢查您的組件是否有導航道具。

做

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

如果 console.log 的結果未定義，則將“import SveKategorije”添加到您的路由文件中。

Answer 2

為了從組件進行導航，您必須進行更多設置。您可以通過 ref 訪問導航器並將其傳遞給我們稍后將用於導航的 NavigationService。

https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html

Answer 3

就我而言，我不小心在功能組件中使用了 this.props.navigation。 如果有人犯了這樣的錯誤，將再次檢查您的代碼。