Блог

Главная - Вопросы по программированию - Реагирующая навигация с 1 страницы на другую не работает

Реагирующая навигация с 1 страницы на другую не работает

#ios #react-native #react-navigation

#iOS #react-native #реагирующая навигация

Вопрос:

Я использую React native для разработки многостраничного приложения для iOS и Android.

Я использовал реагирующую навигацию для перехода с 1 страницы на другую. Но почему-то это не работает и выдает сообщение об ошибке.

Вот что я сделал до сих пор.

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. Я думаю, что это не связано с реакцией-навигацией. проверьте свой упаковщик и убедитесь, что ваше приложение может правильно подключиться к упаковщику.

2. Все работало нормально, пока я не добавил навигацию

3. какую версию react navigation вы используете?

4. Я не уверен, что я новичок

5. проверьте свой 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);

Также вы можете прочитать документацию здесь
Я надеюсь, что это может вам помочь.