React native не может прочитать свойство 'navigate': неопределенная ошибка - PullRequest
Новая
       23

React native не может прочитать свойство 'navigate': неопределенная ошибка

0 голосов
/ 22 мая 2018

У меня есть модальное окно, которое появляется, когда пользователь нажимает кнопку «получить 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;

1 Ответ

0 голосов
/ 22 мая 2018

Вы должны передать this.props.navigation вашему компоненту ShowModal, передать его как реквизит, например 

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