Навигация в ящике, кажется, кеширует реквизит - PullRequest
0 голосов
/ 14 апреля 2020

У меня есть этот index.js файл с навигатором ящика:

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { Image } from "react-native";
import QuizIndex from "./screens/QuizIndex";
import Quiz from "./screens/Quiz";
import Login from "./screens/Login";
import Result from "./screens/Result";
import Register from "./screens/Register";
import QuizSub from "./screens/QuizSub";
import { createDrawerNavigator } from "react-navigation-drawer";
import CustomDrawer from "./components/CustomDrawer";

const MainStack = createDrawerNavigator(
  {
    Login: Login,
    QuizIndex: QuizIndex,
    QuizSub: QuizSub,
    Register: Register,
    Result: Result,
    Quiz: {
      screen: Quiz,
      navigationOptions: ({ navigation }) => ({
        headerTitle: navigation.getParam("title"),
        headerTintColor: "white",
        headerStyle: {
          backgroundColor: "#1a78c6",
          borderBottomColor: navigation.getParam("color")
        },
        headerLeft: () => {
          return null;
        },
        gestureEnabled: false
      })
    }
  },
  {
    contentComponent: CustomDrawer
  }
);

export default createAppContainer(MainStack);

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *, теперь

* * * * * * * * * * * * * * * * * * * *

* * * * * * * * * * * * * * * * * * * * 100 * * * QuizIndex там я рендеринг 3 категории:

import React, { Component } from "react";
import { Text, View, ScrollView, StatusBar } from "react-native";

import spaceQuestions from "../data/space";
import westernsQuestions from "../data/westerns";
import computerQuestions from "../data/computers";
import firebase from "firebase";
import "firebase/firestore";
import { RowItem } from "../components/RowItem";
import { ThemeColors } from "react-navigation";

const styles = {
  container: {
    flexDirection: "row",
    flexWrap: "wrap",
    padding: 20
  }
};

class QuizIndex extends Component {
  constructor(props) {
    super(props);
    this.state = {
      docs: []
    };
  }

  async componentDidMount() {
    await this.quizes();
  }

  quizes = async () => {
    let result = await firebase
      .firestore()
      .collection("quiz")
      .where("parentId", "==", "")
      .get();

    const docs = result.docs.map(doc => {
      return { uid: doc.id, ...doc.data() };
    });

    return this.setState({ docs });
  };

  render() {
    return (
      <View style={styles.container}>
        <StatusBar barStyle="dark-content" />
        {this.state.docs.map(doc => (
          <RowItem
            key={doc.uid}
            parentId={doc.parentId}
            name={doc.title}
            color={doc.color}
            icon={doc.icon}
            onPress={() =>
              this.props.navigation.navigate("QuizSub", {
                title: doc.title,
                questions: spaceQuestions,
                color: doc.color,
                parentId: doc.uid
              })
            }
          />
        ))}
      </View>
    );
  }
}

export default QuizIndex;

И RowItem это одна:

import React from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import FontAwesome5 from "react-native-vector-icons/FontAwesome5";

const styles = StyleSheet.create({
  row: {
    paddingHorizontal: 15,
    paddingVertical: 20,
    backgroundColor: "#36B1F0",
    marginBottom: 20,
    marginLeft: 20,
    width: 150,
    height: 150,
    borderRadius: 3
  },
  text: {
    fontSize: 18,
    color: "#fff",
    fontWeight: "600",
    textAlign: "center"
  }
});

export const RowItem = ({ onPress = () => {}, name, color, icon }) => (
  <TouchableOpacity onPress={onPress} activeOpacity={0.8}>
    <View style={[styles.row, { backgroundColor: color }]}>
      <Text style={styles.text}>{name}</Text>
      <FontAwesome5
        style={{
          color: "white",
          fontSize: 50,
          textAlign: "center",
          marginTop: 20
        }}
        name={icon}
        brand
      />
    </View>
  </TouchableOpacity>
);

Когда я нажимаю на 3-й категории, есть 2 подкатегории. Но если я go вернусь, независимо от кнопки устройства или навигации, и нажму на некоторые другие категории, будут показаны те же 2 подкатегории. Это похоже на кеш для меня. Но я новичок в react-native, поэтому буду благодарен за каждый совет. PS Если использовать createStackNavigator все работает нормально. Например, это поведение "кэша" не происходит.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...