'Cannot read property navigate of undefined' 用于 React Native 导航中的全屏模式
'Cannot read property navigate of undefined' for full screen Modal in React Native navigation
当单击 header 左上角的 'Account' 按钮时,我尝试在 React Native 中呈现全屏模式,但收到错误消息
Cannot read property navigate of undefined
我哪里出错了?
AppNavigator.js 文件:
import React, {useState} from 'react';
import {
Button,
Image,
Modal,
Pressable,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {HomeScreen} from '../../features/reports/screens/HomeScreen';
import {RiskAssessmentListScreen} from '../../features/reports/screens/RiskAssessmentListScreen';
import {ModalScreen} from '../../features/reports/screens/ModalScreen'
const Stack = createStackNavigator();
const AppNavigator = ({navigation}) => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="GoPAD"
component={HomeScreen}
options={{
headerLeft: () => (
<Button
onPress={() => navigation.navigate('MyModal')}
title="Account"
/>
),
headerRight: () => (
<Image
style={{tintColor: 'blue'}}
source={require('../../../assets/img/refreshIcon.png')}
/>
),
}}
/>
<Stack.Screen name="MyModal" component={ModalScreen} />
<Stack.Screen
name="Fire Risk Assessment - Flats"
component={RiskAssessmentListScreen}
options={{headerBackTitle: 'Back'}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default AppNavigator;
还有我的 ModalScreen.js 文件:
import React from 'react'
import {View, Text, Button} from 'react-native'
export const ModalScreen = ({navigation}) => {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={{fontSize: 30}}>This is a modal!</Text>
<Button onPress={() => navigation.goBack()} title="Dismiss" />
</View>
);
}
navigation
道具仅在 NavigationContainer
的 children 中可用。
您现在正在做的是访问 NavigationContainer
的 parent 处的 navigation
,因此 navigation
未定义。
有几种方法可以解决这个问题:
- 将
NavigationContainer
上移到 App.js
或 index.js
,具体取决于您的应用程序结构。
- 将
ref
传递给 NavigationContainer
,并引用 ref
的方法,as shown in documentation。
当单击 header 左上角的 'Account' 按钮时,我尝试在 React Native 中呈现全屏模式,但收到错误消息
Cannot read property navigate of undefined
我哪里出错了?
AppNavigator.js 文件:
import React, {useState} from 'react';
import {
Button,
Image,
Modal,
Pressable,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {HomeScreen} from '../../features/reports/screens/HomeScreen';
import {RiskAssessmentListScreen} from '../../features/reports/screens/RiskAssessmentListScreen';
import {ModalScreen} from '../../features/reports/screens/ModalScreen'
const Stack = createStackNavigator();
const AppNavigator = ({navigation}) => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="GoPAD"
component={HomeScreen}
options={{
headerLeft: () => (
<Button
onPress={() => navigation.navigate('MyModal')}
title="Account"
/>
),
headerRight: () => (
<Image
style={{tintColor: 'blue'}}
source={require('../../../assets/img/refreshIcon.png')}
/>
),
}}
/>
<Stack.Screen name="MyModal" component={ModalScreen} />
<Stack.Screen
name="Fire Risk Assessment - Flats"
component={RiskAssessmentListScreen}
options={{headerBackTitle: 'Back'}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default AppNavigator;
还有我的 ModalScreen.js 文件:
import React from 'react'
import {View, Text, Button} from 'react-native'
export const ModalScreen = ({navigation}) => {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={{fontSize: 30}}>This is a modal!</Text>
<Button onPress={() => navigation.goBack()} title="Dismiss" />
</View>
);
}
navigation
道具仅在 NavigationContainer
的 children 中可用。
您现在正在做的是访问 NavigationContainer
的 parent 处的 navigation
,因此 navigation
未定义。
有几种方法可以解决这个问题:
- 将
NavigationContainer
上移到App.js
或index.js
,具体取决于您的应用程序结构。 - 将
ref
传递给NavigationContainer
,并引用ref
的方法,as shown in documentation。