从一页到另一页的反应导航不起作用

Posted 2023-03-15

【中文标题】从一页到另一页的反应导航不起作用

【英文标题】：React Navigation from 1 page to another not working

【发布时间】：2019-04-13 10:18:08

【问题描述】：

我正在使用 React native 为 ios 和 android 开发多页应用程序。

我使用 React Navigation 从一页导航到另一页。但不知何故它不起作用并给出错误消息。

这是我到目前为止所做的。

App.js

import React,  Component  from 'react';
import 
  Platform,
  StyleSheet,
  Text,
  View
 from 'react-native';
import  StackNavigator  from 'react-navigation';
import Settings from './Settings';
import Home from './Home';

const AppNavigator = StackNavigator(
  SettingScreen:  screen: Settings ,
  HomeScreen:  screen: Home 
);

export default class App extends Component 
  render() 
    return (
      <AppNavigator />
    );
  

Home.js

import React,  Component  from 'react';
import  View, Text  from 'react-native';

export class Home extends Component 
  render() 
    return (
      <View>
        <Text>This is the home screen</Text>
      </View>
    )
  


export default Home

Settings.js

import React,  Component  from 'react';
import  View, Text, Button  from 'react-native';

export class Settings extends Component 
  render() 
    return (
      <View>
        <Text>This is the Settings screen</Text>
        <Button onPress=() => this.props.navigation.navigate('HomeScreen') title="Home"/>
      </View>
    )
  
;

export default Settings;

这是我收到错误消息的方式：

任何帮助或提示将不胜感激。

注意：

我正在尝试在 iOS 上运行它 我已经按照文档正确安装了 React Navigation

【问题讨论】：

我认为这与反应导航无关。检查您的打包程序并确保您的应用可以正确连接到打包程序。

在我添加导航之前一切正常

你使用的是哪个版本的 react 导航？

我不确定我是新手

检查你的package.json文件并找到react navigation的版本

【参考方案1】：

对于版本 > 3 的 React Navigation，您可以像这样配置路由器：

import React,  Component  from 'react';
import 
  Platform,
  StyleSheet,
  Text,
  View
 from 'react-native';
import  createStackNavigator, createAppContainer  from 'react-navigation';
import Settings from './Settings';
import Home from './Home';

const AppNavigator = createStackNavigator(
  SettingScreen:  screen: Settings ,
  HomeScreen:  screen: Home 
);

export default createAppContainer(AppNavigator);

您也可以阅读文档here 我希望这可以帮助你。