使用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而不是App。