ReferenceError: Невозможно найти переменную: navigation [React Native]

Question

Добрый день. Я довольно новичок в React Native. Я использую response-native-app-intro-slider для экранов вступления / приветствия приложения. Намерение состоит в том, чтобы затем перейти к экрану входа в систему, когда пользователь завершит работу или когда он нажмет кнопку пропуска.

Ниже приведен код, который я реализовал на OnboardingScreen. Однако я получаю сообщение об ошибке в отношении навигации.

import {
  StyleSheet,
  View,
  Text,
  Image, 
  StatusBar
} from 'react-native';
import AppNavigator from '../navigation/Screens';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AppIntroSlider from 'react-native-app-intro-slider';
import Onboarding from 'react-native-onboarding-swiper';
import LoginScreen from '../screens/auth/LoginScreen';

const data = [
  {
    title: 'Header 1',
    text: 'Description.\nSay something cool',
    image: require('../assets/images/Slider_1.png'),
    bg: '#ffffff',
  },
  {
    title: 'Header 2',
    text: 'Description.\nSay something cool',
    image: require('../assets/images/Slider_2.png'),
    bg: '#ffffff',
  },
  {
    title: 'Header 3',
    text: 'Description.\nSay something cool',
    image: require('../assets/images/Slider_3.png'),
    bg: '#ffffff',
  },
];

const styles = StyleSheet.create({
  slide: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
  },
  image: {
    width: 320,
    height: 320,
    marginVertical: 32,
  },
  text: {
    fontSize: 20,
    color: '#000000',
    textAlign: 'center',
  },
  title: {
    fontSize: 30,
    fontWeight: 'bold',
    color: '#000000',
    textAlign: 'center',
  },
  dotStyle: {
    backgroundColor: '#000'
  },
});

const Stack = createStackNavigator();

function Root() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Login" component={LoginScreen} />
    </Stack.Navigator>
  );
}
export default class OnboardingScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showRealApp: false,
      //To show the main page of the app
    };
  }
  _onDone = () => {
    navigation.navigate('Root', {
      screen: 'LoginScreen'
    });
    //this.props.navigation.navigate('LoginScreen');
    //this.setState({ showRealApp: true });
  };
  _onSkip = () => {
    this.setState({ showRealApp: true });
  };

  _renderItem = ({item}) => {
    return (
      <View
        style={[
          styles.slide,
          {
            backgroundColor: item.bg,
          },
        ]}>
        <Text style={styles.title}>{item.title}</Text>
        <Image source={item.image} style={styles.image} />
        <Text style={styles.text}>{item.text}</Text>
      </View>
    );
  };

  _keyExtractor = (item) => item.title;

  render() {
    return (
      <View style={{flex: 1}}>
        <StatusBar translucent backgroundColor="transparent" />
        <AppIntroSlider
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
          bottomButton
          showPrevButton
          onDone={this._onDone}
          showSkipButton={true}
          onSkip={this._onSkip}
          data={data}
        />
      </View>
    );
  }
}

Ошибка навигации

Answer 1

Здесь вы делаете разные ошибки. Во-первых, я настоятельно рекомендую вам структурировать свой проект RN таким образом, чтобы он соответствовал вашим потребностям, я не буду много говорить об этом, но могу вас предупредить. Обычно у вас есть отдельная папка / файл с маршрутом для вашего приложения, поэтому переместите туда весь свой код, связанный с react-navigation. После перемещения вы должны создать новый стек, содержащий экран приветствия. Таким образом, это может выглядеть так:

const AppContainer = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Intro" component={OnBoardingScreen} />
      <Stack.Screen name="Login" component={LoginScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)

export default AppContainer

В приведенном выше коде мы вводим новый stack, который будет считаться первым экраном, который будет достигнут. Зачем это нужно? Вам нужно как-то указать react-navigation экранам, которые вы используете, чтобы перейти к ним. После добавления стека у вас будет доступ к navigation пропу. Здесь есть еще одно изменение: вы должны изменить файл App.js новым компонентом, который мы экспортируем из приведенного выше кода, который будет root для проекта. Как только вы закончите с этим, вы можете использовать свой _onDone метод следующим образом:

_onDone = () => {
    /* use the name you used for the stack.
    Also, you don't need to specify the screen
    for this use case since you are not nesting
    the navigators */
    this.props.navigation.navigate('Intro');
  };

И это все. По сути, вам нужно было добавить новый стек с помощью OnBoardingScreen и начать использовать navigation prop