Not able to switch between screens from class component ,every time throwing an error as undefined

问题

I have the following code for intro slider

import React, { Component } from 'react';
import { Dimensions,Platform,ScrollView,StyleSheet,View } from 'react-native';
import Button from './Button';
const { width, height } = Dimensions.get('window');
export default class OnboardingScreens extends Component {
  state = this.initState(this.props);

  /*** Initialize the state*/
  initState(props) {

    // Get the total number of slides passed as children
    const total = props.children ? props.children.length || 1 : 0,
      // Current index
      index = total > 1 ? Math.min(props.index, total - 1) : 0,
      // Current offset
      offset = width * index;
    
    const state = {
      total,
      index,
      offset,
      width,
      height,

    };

    this.internals = {
      isScrolling: false,
      offset
    };

    return state;
  }

}


  renderScrollView = pages => {
    return (
      <ScrollView ref={component => { this.scrollView = component; }}
        {...this.props}
        contentContainerStyle={[styles.wrapper, this.props.style]}
        onScrollBeginDrag={this.onScrollBegin}
        onMomentumScrollEnd={this.onScrollEnd}
        onScrollEndDrag={this.onScrollEndDrag}
      >
        {pages.map((page, i) =>
          // Render each slide inside a View
          <View style={[styles.fullScreen, styles.slide]} key={i}>
            {page}
          </View>
        )}
      </ScrollView>
    );
  }

  /**
   * Render pagination indicators
   */
  renderPagination = () => {
    if (this.state.total <= 1) {
      return null;
    }

    const ActiveDot = <View style={[styles.dot, styles.activeDot]} />,
      Dot = <View style={styles.dot} />;

    let dots = [];

    for (let key = 0; key < this.state.total; key++) {
      dots.push(key === this.state.index
        // Active dot
        ? React.cloneElement(ActiveDot, { key })
        // Other dots
        : React.cloneElement(Dot, { key })
      );
    }

    return (
      <View
        pointerEvents="none"
        style={[styles.pagination, styles.fullScreen]}
      >
        {dots}
      </View>
    );
  }


//render buttons


  renderButton = () => {
    const lastScreen = this.state.index === this.state.total - 1;
    
    return (
      <View pointerEvents="box-none" style={[styles.buttonWrapper, styles.fullScreen]}>
        {lastScreen
          // Show this button on the last screen
          // TODO: Add a handler that would send a user to your app after onboarding is complete
          ? <Button text="Next" onPress={() =>this.props.navigation.navigate("Login")} />
          // Or this one otherwise
          : <Button text="Next" onPress={() => this.swipe()} />
        }
      </View>
    );
  }
  
  
 render = ({ children } = this.props) => {
    return (
      <View style={[styles.container, styles.fullScreen]}>
        {/* Render screens */}
        {this.renderScrollView(children)}
        {/* Render pagination */}
        {this.renderPagination()}
        {/* Render Continue or Done button */}
        {this.renderButton()}
      </View>
    );
  }

when the last screen reached on click button it should navigate to the Login page but it is throwing an error

 TypeError: undefined is not an object (evaluating '_this.props.navigation.navigate')

I tried many alternatives and other StackOverflow solution but nothing work

I don't know where I am doing wrong please help or any suggestions? Thanks in advance

来源：https://stackoverflow.com/questions/65296021/not-able-to-switch-between-screens-from-class-component-every-time-throwing-an