Почему в React Native не работает навигация? - PullRequest
Новая
       43

Почему в React Native не работает навигация?

0 голосов
/ 09 июля 2020

Я работаю со своим проектом Expo-React-Native, и я создал свою навигацию с помощью React Navigation. У меня есть список магазинов и страница с подробностями о каждом из них. Вот как я это делаю:

Stores.tsx 

export default function Stores({ navigation }: any) {
   //...
   return (
      <FlatList
        data={data.allStores}
        renderItem={(store) => (
          <Store
            title={store.item.name}
            onPress={() =>
              navigation.navigate("StoreDetail", {
                title: store.item.title,
              })
            }
          />
        )}
        keyExtractor={(store, index) => String(index)}
      ></FlatList>
    );
}

StoreDetail.tsx 

export default function StoreDetail({ route, navigation }: any) {
  return (
    <View style={styles.container}>
      <ImageBackground
        style={styles.image}
        source={require("../assets/SampleStore.jpg")}
      >
        <TouchableOpacity onPress={navigation.goBack()}>
          <Ionicons
            style={styles.backIcon}
            name="md-arrow-round-back"
            size={30}
            color={colors.iceWhite}
          />
        </TouchableOpacity>
      </ImageBackground>
      <View style={styles.content}>
        <PrimaryText textAlign={"center"} fontSize={30} margin={7}>
          {route.params?.title}
        </PrimaryText>
        <TouchableOpacity style={styles.button}>
          <PrimaryText color={colors.iceWhite} fontSize={16}>
            SACAR TURNO
          </PrimaryText>
        </TouchableOpacity>
      </View>
    </View>
  );
} // then the syles...

А для "обертки", в которой я управляю своей навигацией, у меня есть это: 

import React from "react";

import { Ionicons } from "@expo/vector-icons";
import colors from "../../assets/constants/style-variables";

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from "@react-navigation/native";

import Turnos from "../MisTurnos";
import Stores from "../Stores";
import User from "../User";
import StoreDetail from "../StoreDetail";

const Tab = createBottomTabNavigator();
const StoreNav = createStackNavigator();

function StoreStack() {
  return (
    <StoreNav.Navigator initialRouteName="Stores">
      <StoreNav.Screen name="StoreDetail" component={StoreDetail} />
      <StoreNav.Screen name="Stores" component={Stores} />
    </StoreNav.Navigator>
  );
}
export default function HomeNavigation() {
  return (
    <Tab.Navigator
      tabBarOptions={{
        showLabel: false,
        style: { backgroundColor: colors.iceWhite },
      }}
    >
      <Tab.Screen
        name="Turnos"
        component={Turnos}
        options={{
          tabBarIcon: ({ focused }) => (
            <Ionicons
              name="md-checkbox"
              size={20}
              color={focused ? colors.primary : colors.iconColor}
            />
          ),
        }}
      />
      <Tab.Screen
        name="Stores"
        component={StoreStack}
        options={{
          tabBarIcon: ({ focused }) => (
            <Ionicons
              name="md-basket"
              size={20}
              color={focused ? colors.primary : colors.iconColor}
            />
          ),
        }}
      />
      <Tab.Screen
        name="User"
        component={User}
        options={{
          tabBarIcon: ({ focused }) => (
            <Ionicons
              name="md-person"
              size={20}
              color={focused ? colors.primary : colors.iconColor}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

Проблема в том, что всякий раз, когда я нажимаю на магазин, он просто ничего не делает, я проверял, был ли проблема с перекрытием элементов, но я не нашел. Что мне здесь не хватает?

...