प्रतिक्रिया मूल - नेविगेशन समस्या "अपरिभाषित एक ऑब्जेक्ट नहीं है (this.props.navigation.navigate)"

Question

Im इस ट्यूटोरियल https://reactnavigation.org/docs/intro/ के बाद Im और कुछ मुद्दों में चल रहा हूं।

मैं एक्सपो क्लाइंट ऐप का उपयोग करके हर बार अपना ऐप प्रस्तुत करने के लिए और सिम्युलेटर/एमुलेटर नहीं करता हूं।

मेरा कोड नीचे नीचे देखा गया है।

मैं मूल रूप से "SimpleApp" स्थिरांक ऊपर "ChatScreen" घटक परिभाषित था, लेकिन है कि मुझे निम्न त्रुटि दिया:

Route 'Chat' should declare a screen. For example: ...etc

तो मैं SimpleApp की decleration ले जाया करने के लिए बस के ऊपर "AppRegistry" और है कि एक चिह्नित किये नए त्रुटि

Element type is invalid: expected string.....You likely forgot to export your component..etc

ट्यूटोरियल कुंजी शब्द "निर्यात डिफ़ॉल्ट" किसी भी घटक है जो मुझे लगता है कि तथ्य यह है कि यह एक्सपो एप्लिकेशन पर चल रहे im के साथ क्या करना पड़ सकता है में नहीं जोड़ा था? इसलिए मैंने "होमस्क्रीन" में "निर्यात डिफ़ॉल्ट" जोड़ा और त्रुटि चली गई।

नए त्रुटि नहीं कर सकते कि मैं बंद छुटकारा (नीचे दिए गए कोड के आधार पर) प्राप्त करने के लिए लग रहे हैं निम्नलिखित है:

undefined is not an object (evaluating 'this.props.navigation.navigate')

मैं इसके बारे में छुटकारा नहीं मिल सकता है जब तक कि मैं "{}" के आसपास को दूर "स्थिरांक {नेविगेट}" लेकिन यह है कि नेविगेशन टूट जाएगा जब मैं घर स्क्रीन से बटन दबाएं

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

export default class HomeScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Welcome', 
    }; 
    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View> 
     <Text>Hello, Chat App!</Text> 
     <Button 
      onPress={() => navigate('Chat')} 
      title="Chat with Lucy" 
     /> 
     </View> 
    ); 
    } 
} 



class ChatScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Chat with Lucy', 
    }; 
    render() { 
    return (
     <View> 
     <Text>Chat with Lucy</Text> 
     </View> 
    ); 
    } 
} 

const SimpleApp = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    Chat: { screen: ChatScreen }, 
}); 
AppRegistry.registerComponent('SimpleApp',() => SimpleApp); 

Answer 1

एक्सपो के साथ

आप अनुप्रयोग पंजीकरण अपने आप के बजाय आप देना चाहिए एक्सपो करना should't यह कर, ध्यान में रखते हुए ध्यान रखें कि आपको हमेशा डिफ़ॉल्ट घटक निर्यात करना होगा: इसके अलावा आप नी पूर्ण नीचे दिए गए कोड पाएं::

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

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

class ChatScreen extends React.Component { 
    // Nav options can be defined as a function of the screen's props: 
    static navigationOptions = ({ navigation }) => ({ 
    title: `Chat with ${navigation.state.params.user}`, 
    }); 
    render() { 
    // The screen's current route is passed in to `props.navigation.state`: 
    const { params } = this.props.navigation.state; 
    return (
     <View> 
     <Text>Chat with {params.user}</Text> 
     </View> 
    ); 
    } 
} 

const SimpleAppNavigator = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    Chat: { screen: ChatScreen } 
}); 

const AppNavigation =() => (
    <SimpleAppNavigator /> 
); 

export default class App extends React.Component { 
    render() { 
    return (
     <AppNavigation/> 
    ); 
    } 
} 

Answer 2

const AppNavigation =()=>{ <SimpleApp />} 

export default class App extends React.Componet{ 
    render(){ 
     return (
     <AppNavigation/> 
    ); 
    } 
}