屏幕之间的本机导航

Posted 2023-02-23

【中文标题】屏幕之间的本机导航

【英文标题】：react-native navigation between screens

【发布时间】：2019-02-24 10:01:35

【问题描述】：

我是 react-native 的初学者，我将在我的应用程序中实现 react 堆栈导航。我试图让我的 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>
    );
  

【参考方案1】：

你忘记创建应用容器了，看看这个链接https://reactnavigation.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 />
    );
  

【讨论】：

谢谢。我不知道它是否有效，因为我所知道的是 Unable to resolve "../Screens/Home" from "App.js

这是因为如果 Screens 目录与 App.js 处于同一级别，则它无法在您的目录中找到文件尝试删除第一个点 "../Screens/Home" => "./Screens /首页”

我刚刚修复了它，我再次重新启动了 expo，因为我有时会遇到 dir 问题。导航工作得很好。非常感谢。

我刚刚修复了它，我再次重新启动了 expo，因为我有时会遇到 dir 问题。导航工作得很好。非常感谢。

【参考方案2】：

我想，你错过了“createAppContainer”。试试下面的代码。

const AppStackNavigator = createStackNavigator(
  Welcome: 
   screen: WelcomeScreen,
     
 );

const AppNavigator = createAppContainer(AppStackNavigator);

然后在渲染中使用 AppNavigator。