• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

React Native - problem z nawigacją

Aruba Cloud - Virtual Private Server VPS
0 głosów
146 wizyt
pytanie zadane 1 kwietnia 2023 w JavaScript przez DzikieHarce Użytkownik (690 p.)

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.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 193 wizyt
pytanie zadane 20 marca 2023 w JavaScript przez MacieKap Bywalec (2,400 p.)
0 głosów
0 odpowiedzi 795 wizyt
0 głosów
1 odpowiedź 284 wizyt
pytanie zadane 19 marca 2023 w JavaScript przez MacieKap Bywalec (2,400 p.)

93,335 zapytań

142,330 odpowiedzi

322,411 komentarzy

62,670 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...