Question

当用户点击“获取GEO”按钮时，我会弹出一个模态。在模态中是一个按钮，它应该导航到UserScreen，但是我得到错误：无法读取属性'navigate'是未定义的。如果我将按钮放在class WelcomeScreen extends Component内，按钮工作正常。

提前致谢。

以下是代码：

WelcomeScreen：

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组件，把它传递给像

这样的道具

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

React native无法读取属性'navigate'是未定义的错误

1 个答案: