Navigationsfehler während der Schaltfläche onPress-Ereignis

Question

Ich habe gesehen, dass dies zuvor gefragt wurde, aber keine der Lösungen, die ich auf Stack Overflow und anderswo gefunden habe, half in meiner Situation.

Ich erhalte diese Störung, wenn die ‚Info‘ -Taste

klicken

undefined is not an object evaluating (_this.props.navigation) 

Ich bin nicht sicher, warum, aber ich weiß, es hat mit dieser Linie in der ChatScreen Klasse zu tun:

const { navigate } = this.props.navigation; 

Die Sache, die ich nicht verstehe, ist, dass die gleiche Zeile in der HomeScreen-Klasse funktioniert.

Also ich bin mir nicht sicher, wie es zu beheben ist.

Wenn jemand einen Rat geben könnte, würde ich es sehr schätzen.

Danke!

Hier ist mein Code:

import React from 'react'; 
import { AppRegistry, Text, View, Button,} from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 
import { TabNavigator } from 'react-navigation'; 

class HomeScreen extends React.Component { 
    static navigationOptions = { 
     title: 'Welcome', 
    }; 
    render() { 
     //works 
     const { navigate } = this.props.navigation; 
     return (
      <View> 
       <Button 
        onPress={() => navigate('Chat', { user: 'Abe'})} 
        title = "Chat with Abe" 
       /> 
      </View> 
     ); 
    } 
} 

class ChatScreen extends React.Component { 

    static navigationOptions = ({ navigation }) => { 
     const { state, setParams } = navigation; 
     const isInfo = state.params.mode === 'info'; 
     const {user} = state.params; 
     //throws the error: undefined is not an object evaluating this.props.navigation 
     const { navigate } = this.props.navigation; 
     return { 
      title: isInfo ? `${user}'s Contact Info:` : `Chat with ${state.params.user}`, 
      headerRight: (
       <Button 
        title={ isInfo ? 'Done' : `${user}'s info` } 
        onPress={() => navigate('Info', { user: 'Abe' })} 
       /> 

      ) 
     }; 
    }; 

} 

class InfoScreen extends React.Component {  
    static navigationOptions = ({ navigation }) => { 
     const {user} = state.params; 
    }; 
    render() { 
     return (
      <View> 
       <Text> 
        {user}'s Info 
       </Text> 
      </View> 
     ); 
    } 
} 

//navigation tabs 
const MainScreenNavigator = TabNavigator({ 
    Home: { screen: HomeScreen } 
}); 

const NavTest = StackNavigator({ 
    Home: { screen: MainScreenNavigator }, 
    Chat: { screen: ChatScreen }, 
    Info: { screen: InfoScreen } 
}); 

//title 
MainScreenNavigator.navigationOptions = { 
    title: 'My Chats', 
} 

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

Answer 1

Da Sie das Navigationsobjekt aus navigationOptions wenn es darum geht, sollten Sie in der Lage sein, auf die Ebene zu nennen, ohne this.props.navigation zu tun zu haben:

static navigationOptions = ({ navigation }) => { 
    const { state, setParams, navigate } = navigation; 
    const isInfo = state.params.mode === 'info'; 
    const {user} = state.params; 
    return { 
     title: isInfo ? `${user}'s Contact Info:` : `Chat with ${state.params.user}`, 
     headerRight: (
      <Button 
       title={ isInfo ? 'Done' : `${user}'s info` } 
       onPress={() => navigate('Info', { user: 'Abe' })} 
      /> 
     ) 
    }; 
};