开发者问题收集

React Navigation 从一个页面到另一个页面不起作用

2019-04-13
236

我正在使用 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 上运行它
  • 我已按照文档
1个回答

对于 React Navigation 版本 > 3,您可以像这样配置路由器:

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);

您也可以阅读 此处 的文档 希望这对您有所帮助。

Ali SabziNezhad
2019-04-13