У меня есть этот 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
все работает нормально. Например, это поведение "кэша" не происходит.