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

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>
);
}
}

应用.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} />