對 React 來說相當新，并且只要我可以跟隨 YouTube 教程。我已匯入螢屏的導航欄出現問題。單擊任何鏈接都會導致“未定義”錯誤。
我的環境是
- 反應原生
- Android 開發作業室（帶模擬器）
- VSCode 開發
這是我的檔案
應用程式.js
import React, from 'react';
import { StyleSheet } from 'react-native';
// Menu and Navigation
import { NavigationContainer } from '@react-navigation/native';
import Navigator from './Screens/AppNavigator';
export default function App() {
return (
<NavigationContainer>
<Navigator />
</NavigationContainer>
);
};
應用導航器.js
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';
export default function AppNavigator() {
const Stack = createStackNavigator();
return (
<Stack.Navigator initialRouteName='Home'>
<Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} />
<Stack.Screen name="Profile" component={ProfileScreen} options={{ headerShown: false }} />
</Stack.Navigator>
);
};
ProfileScreen.js -這包含匯入的內容和導航欄。
import React, { useState } from 'react';
import { View, Text, Image, Button, TextInput } from 'react-native';
import ScreenStyles from './ScreenStyles';
import NavBar from '../components/NavBar/NavBar';
export default function ProfileScreen() {
return (
<View style={ScreenStyles.ScreenFramework}>
<View style={ScreenStyles.ScreenContainer}>
<View style={{ padding: 30 }}>
<Text style={ScreenStyles.ScreenTitle}>Your Profile Page</Text>
</View>
</View>
<View style={ScreenStyles.NavBarContainer}>
<NavBar />
</View>
</View>
);
};
NavBar.js - 單擊鏈接時，會引發錯誤“無法讀取未定義的屬性 'navigate'”
import React from 'react';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import styles from './NavbarStyle';
export default function NavBar({ navigation }) {
return (
<View style={styles.NavBarContainer}>
<View style={styles.ImageContainer}>
<TouchableOpacity onPress={() => navigation.navigate('Home')}>
<View style={styles.ImageIcon}>
<Image
style={{ width: 40, height: 40 }}
source={require('./img/home.png')} />
</View>
</TouchableOpacity>
</View>
<View style={styles.ImageContainer}>
<TouchableOpacity onPress={() => navigation.navigate('Profile')}>
<View style={styles.ImageIcon}>
<Image
style={{ width: 40, height: 40 }}
source={require('./img/profile.png')} />
</View>
</TouchableOpacity>
</View>
</View>
);
}
我想知道我能做些什么來解決這個問題？
uj5u.com熱心網友回復：
您需要將導航作為道具傳遞 <NavBar />或使用此處所述的鉤子
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/521104.html
標籤：安卓反应式