屏幕之间的反应本地导航

Question

我是React-Native的初学者，我正在在我的应用中实现React stack Navigation。我正在尝试使我的app.js渲染我的home.js作为默认屏幕。我希望将app.js用作主屏幕，并添加另一个登录屏幕，但我不能。我无法说明出什么问题，我只会让开发服务器返回响应错误代码：500。这是app.js。

的代码

import React from 'react';
import { StyleSheet, Text, View, Button, KeyboardAvoidingView } from 'react-native';
import {createStackNavigator, createAppContainer} from 'react-navigation'
import Home from './Screens/Home';
const AppNavigator = createStackNavigator({
  Home: {screen: Home},
});
export default class App extends React.Component {
  render() {
    return (
      <AppNavigator />
    );
  }
}

这是我的home.js文件。

import React from 'react';
import { StyleSheet, Text, View, Button, KeyboardAvoidingView } from 'react-native';
import {StackNavigator, createStackNavigator, createAppContainer} from 'react-navigation'

export default class Home extends React.Component {
  static navigationOptions = {
    title: 'Home',
  }
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>This is the Home HomeScreen</Text>
      </View>
    );
  }
}

Answer 1

您忘记创建应用程序容器，查看此链接https://reaectnavigation.org/docs/en/hello-react-navigation.html

import React from 'react';
import { StyleSheet, Text, View, Button, KeyboardAvoidingView } from 'react-native';
import {createStackNavigator, createAppContainer} from 'react-navigation'
import Home from './Screens/Home';
const AppNavigator = createStackNavigator({
  Home: {screen: Home},
});
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
  render() {
    return (
      <AppContainer />
    );
  }
}

Answer 2

我想，你错过了" createAppContainer"。尝试以下代码。

const AppStackNavigator = createStackNavigator({
  Welcome: {
   screen: WelcomeScreen,
     }
 });
const AppNavigator = createAppContainer(AppStackNavigator);

然后在渲染中使用AppNavigator。