使用 StackNavigator 在屏幕之间导航

Question

当我的 App.js 说 undefined 不是一个对象（评估“this.props.navigation.navigate”）时，我很难理解我的 App.js 出了什么问题。当它在主屏幕和 chatsrceen 之间切换时，我一直在关注 react native 文档。我仍然无法让它工作。有人可以帮我吗？

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。