StackNavigatorで画面間を移動する

Question

私のApp.jsでundefinedがオブジェクトではないと言ったときに問題を理解するのに問題があります（ 'this.props.navigation.navigate'を評価する）。私はそれがホームスクリーンとchatsrceenとの間で切り替わるときに、ネイティブのドキュメンテーションに反応しています。私はまだそれを動作させることはできません。誰か助けてくれますか？

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

class App 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 App1 = StackNavigator({ 
    Home: { screen: App }, 
    Chat: { screen: ChatScreen }, 
}); 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 
}); 

export default App1 

Answer 1

App1ではなくApp1をエクスポートする必要があります。