我有这个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);
CustomDrawer
是这个:
import React, { Component } from "react";
import { SafeAreaView, ScrollView, View, Image } from "react-native";
import { DrawerItems } from "react-navigation-drawer";
class CustomDrawer extends Component {
constructor(props) {
super(props);
}
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<View
style={{
height: 150,
backgroudColor: "white",
justifyContent: "center",
alignItems: "center"
}}
>
<Image
source={require("../assets/logo.png")}
style={{ width: 120, height: 120, borderRadius: 60 }}
/>
</View>
<ScrollView>
<DrawerItems {...this.props} />
</ScrollView>
</SafeAreaView>
);
}
}
export default CustomDrawer;
现在,当我登录时,我被重定向到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>
);
当我单击第三个类别时,有2个子类别。但是,无论我通过设备按钮还是通过导航返回,然后单击其他一些类别,都将显示相同的2个子类别。对我来说好像是缓存。但是我在react-native
中还很陌生,因此我将为您的每条建议而感恩。
附言
如果使用createStackNavigator
,一切正常。例如。不会发生这种“缓存”行为。