Próbuję stworzyć pasek nawigacyjny w React nativie. Udało mi się jakoś go ostylować, teraz chciałabym, aby po kliknięciu na napis/przycisk w rozwijanym menu zmienił się ekran, ale nawigacja w React Nativie różni się od tej w Reaccie. Czy w ogóle da się zrobić tak, by w jednego paska nawigacyjnego, działającego jako osobny komponent nawigować po całej aplikacji? Poniżej wklejam próby utworzenia czegoś takiego, niestety, po kliknięciu ekran się nie zmienia. To mój pierwszy projekt w React Nativie, czy menu może nie działać, przez nakaz zwinięcia go po kliknięciu gdziekolwiek?
Kod paska:
const NavBar = ({navigation}) => {
const menuItems = [
{
route: '../../homepage/homepage',
displayTitle: 'Home'
},
{
route: 'User Info',
displayTitle: 'User Info'
},
{
route: 'Book list',
displayTitle: 'Book list'
},
{
route: ' All books list',
displayTitle: 'All books list'
},
{
route: 'Login',
displayTitle: 'Login'
}
];
const [showMenu, setShowMenu] = useState(false);
const toggleMenu = () => {
setShowMenu(!showMenu);
};
const handlePressOutside = () => {
setShowMenu(false);
};
let [font] = useFonts({
MrDafoe_400Regular
})
if(!font){
return <AppLoading />;
}
return(
<View style={styles.all}>
<View style={styles.container}>
<TouchableOpacity onPress={toggleMenu} style={{marginTop: 22}}>
<Feather name="menu" size={30} color="white" alignSelf="flex-end" />
</TouchableOpacity>
<Text style={styles.logoText}>myShelf</Text>
</View>
{showMenu && (
<View style={styles.menuBar}>
{menuItems.map((menuItem) => (
<TouchableOpacity
key={menuItem.route}
onPress={() => setCurrentView(menuItem.route)}
//onPress={() => navigation.navigate(menuItem.route)}
>
<Text style={styles.menuText}>{menuItem.displayTitle}</Text>
</TouchableOpacity>
))}
</View>
)}
{showMenu && (
<TouchableOpacity
onPress={handlePressOutside}
style={{ position: 'absolute', top: 0, bottom: 0, right: 0, left: 0 }}
/>
)}
</View>
)
}
Kod App.js:
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Homepage}
options={{headerShown: false}}
/>
<Stack.Screen
name="Login"
component={Login}
options={{headerShown: false}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
Kod przykładowego ekranu, np Homepage:
const HomePage = () => {
return (
<View style={styles.container}>
<NavBar/>
<Text>Home page</Text>
<StatusBar style="auto" />
</View>
);
}
Wkleiłam jedynie najważniejsze fragmenty kodów, z pominięciem importów czy CSS.