用于反应导航的主屏幕（App.js）结构

Question

我正在尝试实现react-navigation程序包，以使一个屏幕链接到另一个屏幕。我收到一个错误“未定义不是对象（正在评估'_this2.props.navigation.navigate'）-React Native”

我相当确定此错误是因为我的项目的App.js部分没有任何内容。

我有一个名为screen.js的文件，它有两个类（每个屏幕一个），还有一个onpress函数，它调用this.props.navigator来更改屏幕。

Screen.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableHighlight,
  PanResponder,
  AppRegistry,
  Image,
  Alert,
} from 'react-native';
import { Card, Button, Icon } from 'react-native-elements';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { Constants, MapView } from 'expo';

class HomeScreen extends Component {
  static navigationOptions = {
    title: 'Home',
  };

  constructor() {
    super();
    this.state = {...};
  }

  _handleButtonPress = () => {
    Alert.alert('Button pressed!', 'You did it!');
  };

  componentWillMount() {
    this.panResponderRef = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: this.doNothing,
      onPanResponderMove: this._handlePanResponderMove,
      onPanResponderRelease: this._handlePanResponderEnd,
      onPanResponderTerminate: this.doNothing,
    });
  }



  //onPanResponderRelease and onPanResponderTerminate Handler
  _handlePanResponderEnd = (event, gestureState) => {
    const { navigate } = this.props.navigation;
    let tIndex = this.state.index;
    if (this.state.dy > 100)
      navigate('Second', { index: tIndex, getFunc: this.getName.bind(this) });
    else if (this.state.dx > 150) this.setState({ index: tIndex + 1 });
    else if (this.state.dx < -150 && tIndex > 0)
      this.setState({ index: tIndex - 1 });
  };

  render() {

    const { navigate } = this.props.navigation;

    return (
      <View style={styles.container}>
            <TouchableHighlight
              style={styles.TouchableHighlight}
              
              onPress={() => this.props.navigator.push({id:'SecondScreen'})}>
              
              <View style={styles.author}>
                <Text style={styles.author}>Shelter 1</Text>
              </View>
            </TouchableHighlight>
      </View>
    );
  }
}

class SecondScreen extends React.Component {
  static navigationOptions = {
    title: 'Second',
  };
  constructor(props) {
    super(props);
    this.state = {
      index: this.props.navigation.state.params.index,
      getFunc: this.props.navigation.state.params.getFunc,
      name: 'not set'
    };
  }
  componentWillMount() {
    let tName = this.state.getFunc(this.state.index);
    this.setState({ name: tName });
  }


  render() {
    const { navigate } = this.props.navigation;

    return (
      <View style={styles.container}>
       
        </View>

        <Button title="Go to Home page" onPress={() => navigate('Home')} />
      </View>
    );
  }
}

const NavigationApp = createStackNavigator({
  Home: { screen: HomeScreen },
  Second: { screen: SecondScreen },
});

export default createAppContainer(NavigationApp);
});

App.js

import NavApp from "screen";

export default NavApp;

我收到错误消息“未定义不是对象（正在评估'_this2.props.navigator.push'）”

Answer 1

您可以尝试

export default withAlert(Alerts);