ReferenceError：找不到变量：导航[React Native]

Question

美好的一天。我是React Native的新手。我正在为应用程序的简介/欢迎屏幕使用react-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>
    );
  }
}

Navigation error

Answer 1

导航是一个道具，所以可能在this.props.navigation内部