React native error：undefined不是对象（评估'this.props.navigator.push'）

Question

我是本机的新手，我尝试在本机中开发本机应用程序，但我有onPress点击事件问题。 InfoSwipper.js文件我点击登录按钮显示“未定义不是对象（评估'this.props.navigator.push'）”。我不确定我错过了什么。请有人帮助我。 提前谢谢。

index.android.js文件代码

"use strict";
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator,
    StatusBar,
    AsyncStorage,
} from 'react-native';
var SignUp = require("./components/SignUp");
var InfoScreens = require("./components/InfoScreens");
import SplashScreen from 'react-native-splash-screen'
var Kahaani = React.createClass({
    _renderScene(route, navigator) {
        if (route.id === 0) {
          return <InfoScreens navigator={navigator} />
        }
        else if (route.id === 1) {
            StatusBar.setHidden(false);
            console.log('WRONG SIGNIN', "here");
          return <LogIn navigator={navigator} /> 
        }
    },
      componentDidMount() {
         // do anything while splash screen keeps, use await to wait for an async task.
        SplashScreen.hide();
    },
    render: function() {
        return (
          <Navigator
                 style={styles.navigationContainer}
                 initialRoute={{id: 0, }}
                 renderScene={this._renderScene} />
        );
    }
});
var styles = StyleSheet.create({
    navigationContainer: {
        flex: 1,
    },
});
AppRegistry.registerComponent('Kahaani', () => Kahaani);

swipperScreen.js

'use strict';
import React, { Component } from 'react';
import {
  Dimensions,       // Detects screen dimensions
  Platform,         // Detects platform running the app
  ScrollView,       // Handles navigation between screens
  StyleSheet,       // CSS-like styles
  View,  
  Text,Navigator, TouchableHighlight, // Container component
} from 'react-native';
import LogIn from './LogIn';
var navigator;
class InfoScreenSwiper extends Component {
    constructor(props)
      {
          super(props);
      } 
  static defaultProps = {
    horizontal: true,
    pagingEnabled: true,  
    showsHorizontalScrollIndicator: false,
    showsVerticalScrollIndicator: false,   
    bounces: false,   
    scrollsToTop: false,    
    removeClippedSubviews: true,  
    automaticallyAdjustContentInsets: false,
    index: 0
  };
  state = this.initState(this.props);
  initState(props) {
    const total = props.children ? props.children.length || 1 : 0,
    index = total > 1 ? Math.min(props.index, total - 1) : 0,
    offset = width * index;
    const state = {
      total,
      index,
      offset,
      width,
      height,
    };
    this.internals = {
      isScrolling: false,
      offset
    };
    return state;
  }
  onScrollBegin = e => {
    // Update internal isScrolling state
    this.internals.isScrolling = true;
  }
  onScrollEnd = e => {
    // Update internal isScrolling state
    this.internals.isScrolling = false;
    // Update index
    this.updateIndex(e.nativeEvent.contentOffset
      ? e.nativeEvent.contentOffset.x
      // When scrolled with .scrollTo() on Android there is no contentOffset
      : e.nativeEvent.position * this.state.width
    );
  }
  onScrollEndDrag = e => {
    const { contentOffset: { x: newOffset } } = e.nativeEvent,
      { children } = this.props,
      { index } = this.state,
      { offset } = this.internals;

    if (offset === newOffset &&
      (index === 0 || index === children.length - 1)) {
      this.internals.isScrolling = false;
    }
  }
  updateIndex = (offset) => {
    const state = this.state,
      diff = offset - this.internals.offset,
      step = state.width;
    let index = state.index;
    if (!diff) {
      return;
    }
    index = parseInt(index + Math.round(diff / step), 10);
    this.internals.offset = offset;
    this.setState({
      index
    });
  }
  swipe = () => {
    if (this.internals.isScrolling || this.state.total < 2) {
      return;
    }
    const state = this.state,
      diff = this.state.index + 1,
      x = diff * state.width,
      y = 0;
    this.scrollView && this.scrollView.scrollTo({ x, y, animated: true });
    this.internals.isScrolling = true;
    if (Platform.OS === 'android') {
      setImmediate(() => {
        this.onScrollEnd({
          nativeEvent: {
            position: diff
          }
        });
      });
    }
  }
  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>
    );
  }
  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>
    );
  }
    onMainPressLogIn= () =>
      {
          console.log('WRONG SIGNIN', "onMainPressLogIn");
        this.props.navigator.push({
            id:1
        });
      }
    onSubmitPressed () {
        console.log('WRONG SIGNIN', "onSubmitPressed");
        this.props.navigator.push({
            id:2
        })  
      }
 renderButtonBottom = () => {
    const lastScreen = this.state.index === this.state.total - 1;
    return (
      <View pointerEvents="box-none" style={[styles.buttonWrapper]}>
        <View style={ [styles.viewButton]}>
            <Text style={[styles.buttonLogIn,styles.buttonAll]}  onPress={this.onMainPressLogIn} >LOG IN</Text>
            <Text style={[styles.buttonSignUp,styles.buttonAll]} onPress={(this.onSubmitPressed.bind(this))}>SIGN UP</Text>
        </View>
      </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.renderButtonBottom()}
      </View>
    );
  }
}
module.exports = InfoScreenSwiper;