React native 无法读取属性“导航”是未定义的错误

Question

当用户单击“获取 GEO”按钮时，我会弹出一个模式。在模式中是一个应该导航到用户屏幕的按钮，但我收到错误：无法读取属性“导航”未定义。如果我将按钮放在class WelcomeScreen extends Component 内，则按钮可以正常工作。

提前致谢。

下面是代码：

欢迎屏幕：

import React, { Component } from "react";
import { TouchableOpacity, TouchableHighlight, Modal, StyleSheet, Text, View, Button, AppRegistry, Image, TextInput } from 'react-native';

import { observable } from "mobx";
import { observer, inject } from "mobx-react";

@inject("store")
class WelcomeScreen extends Component {
  constructor(props: Object) {
    super(props);
  }


  render() {
    console.log("Render home");
    return (
      <View>

        <TouchableOpacity style={
          [{
            paddingTop: 10,
            paddingBottom: 10,
            borderRadius: 5,
            marginBottom: 20,
            width: '70%',
            backgroundColor: '#009688'
          }]
        } activeOpacity={.5}
          onPress={this.props.store.fetchNearestLocation}
        >
          <Text>Get GEO</Text>
        </TouchableOpacity>
        <ShowModal />
      </View>
    );
  }
}
export default WelcomeScreen

@inject("store")
@observer
class ShowModal extends Component {
  render() {
    console.log("Render Modal");
    return (
      <Modal
        animationType="slide"
        visible={this.props.store.isModalVisible}
        onRequestClose={() => {
          alert('Modal has been closed.');
        }}>
          <View>
            <Text>Hello World!</Text>
            <TouchableOpacity style={
              [{
                paddingTop: 10,
                paddingBottom: 10,
                borderRadius: 5,
                marginBottom: 20,
                width: '70%',
                backgroundColor: '#009688'
              }]
            } activeOpacity={.5}
              onPress={() => this.props.navigation.navigate('UserScreen')}
            >
            </TouchableOpacity>
            <TouchableOpacity style={
              [{
                paddingTop: 10,
                paddingBottom: 10,
                borderRadius: 5,
                marginBottom: 20,
                width: '70%',
                backgroundColor: '#009688'
              }]
            } activeOpacity={.5}
              onPress={this.props.store.closeModal}
            >
              <Text>Close Modal</Text>
            </TouchableOpacity>
          </View>
      </Modal>
    );
  }
}

App.js

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { StackNavigator } from 'react-navigation';

import { Provider } from "mobx-react";
//import Home from "./Home";
import stores from "./stores";

import WelcomeScreen from './screens/WelcomeScreen';
import UserScreen from './screens/UserScreen';

const AppNavigator = StackNavigator({
  WelcomeScreen: { screen : WelcomeScreen },
  UserScreen: { screen : UserScreen }
})

const styles = StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
  },
});

class App extends React.Component {

  render() {
      return (
        <Provider { ...stores }>
        <AppNavigator />
        </Provider>
      );
  }
}
export default App;

Answer 1

您应该将 this.props.navigation 传递给您的 ShowModal 组件，将其作为 prop 传递，例如

 <ShowModal navigation = {this.props.navigation} />