【发布时间】：2021-12-24 03:16:37
【问题描述】：
每当我在 History.js 中并单击其中一个产品列表以导航到另一个页面时，该页面应该会打开一个新页面以获取更多描述并能够联系卖家......所以我面临的问题是。每当我单击 History.js 中的任何项目时，该页面中都不会发生任何事情。但是当我打开 Home.js 时，我看到它是在 Home.js 而不是 History.js 中导航的。 我在这里错过了什么？
Home.js
import React from "react";
import {
View,
Text,
Button,
SafeAreaView,
TextInput,
StatusBar,
Platform,
ScrollView,
Image,
StyleSheet,
TouchableOpacity,
} from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import ProductsList from "../../components/productsList/ProductsList";
import Icon from "react-native-vector-icons/Ionicons";
import { fontSize } from "styled-system";
import Location from "../components/Location";
export default function Search({ navigation }) {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<View
style={{
height: 80,
backgroundColor: "white",
borderBottomWidth: 1,
borderBottomColor: "#dddddd",
}}
>
<View
style={{
flexDirection: "row",
padding: 10,
backgroundColor: "white",
marginHorizontal: 20,
shadowOffset: { width: 0, height: 0 },
shadowColor: "black",
shadowOpacity: 0.2,
borderRadius: 50,
elevation: 1,
}}
>
<Icon name="ios-search" size={20} style={{ marginRight: 10 }} />
<TextInput
underlineColorAndroid="transparent"
placeholder="City, airport, adrerss, or hotel"
placeholderTextColor="grey"
style={{ flex: 1, fontWeight: "700", backgroundColor: "white" }}
/>
</View>
</View>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
scrollEventThrottle={16}
>
<View style={{ height: 175 }}>
<Image
source={require("../home/homepage.jpeg")}
resizeMode="contain"
/>
</View>
</ScrollView>
<ScrollView scrollEventThrottle={16}>
<View
style={{
flex: 1,
backgroundColor: "white",
paddingTop: 30,
paddingRight: 40,
justifyContent: "center",
alignItems: "center",
}}
>
<Text
style={{
alignItems: "center",
fontSize: 24,
fontWeight: "700",
paddingHorizontal: 25,
marginLeft: 50,
borderColor: "grey",
height: 50,
width: 230,
shadowOpacity: 0.5,
borderWidth: 0.5,
paddingTop: 10,
backgroundColor: "#f5bd1f",
justifyContent: "center",
}}
>
FIND YOUR RIDE
</Text>
<View style={{ height: 130, marginTop: 20 }}>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
>
<TouchableOpacity>
<Location
imageUri={require("../home/nicosia.jpg")}
name="Nicosia"
/>
</TouchableOpacity>
<TouchableOpacity>
<Location
imageUri={require("../home/kyrenia.jpg")}
name="Kyrenia"
/>
</TouchableOpacity>
<TouchableOpacity>
<Location
imageUri={require("../home/famagusta.jpg")}
name="Famagusta"
/>
</TouchableOpacity>
<TouchableOpacity>
<Location
imageUri={require("../home/lefke.png")}
name="Lefke"
/>
</TouchableOpacity>
</ScrollView>
</View>
<Text
style={{
flex: 1,
fontWeight: "bold",
fontSize: 24,
alignItems: "center",
color: "#f5bd1f",
paddingLeft: 20,
}}
>
/ / / / /
</Text>
<View style={{ marginTop: 40, paddingHorizontal: 20 }}>
<View>
<Text
style={{
fontSize: 24,
fontWeight: "700",
paddingLeft: 40,
}}
>
<View>
<MaterialCommunityIcons
name="face-agent"
size={30}
style={{ paddingLeft: 10, color: "#f5bd1f" }}
/>
</View>
24/7 customer support
</Text>
<Text
style={{ paddingLeft: 80, marginTop: 20, marginBottom: 25 }}
>
{
"Rest easy knowing that everyone in \nthe Rent in cars community is screened, \nand 24/7 customer support and \nroadside assistant are just a tap away."
}
</Text>
</View>
<View>
<Text
style={{
fontSize: 24,
fontWeight: "700",
paddingLeft: 40,
}}
>
<View>
<MaterialCommunityIcons
name="car"
size={30}
style={{
paddingLeft: 10,
color: "#f5bd1f",
marginTop: 20,
}}
/>
</View>
Endless options
</Text>
<Text
style={{ paddingLeft: 80, marginTop: 20, marginBottom: 25 }}
>
{
"Choose from hundreds of models\nyou won't find anywhere else. Pick it \nup or get it delivered where you \nwant it."
}
</Text>
</View>
<View>
<Text
style={{
fontSize: 24,
fontWeight: "700",
paddingLeft: 40,
}}
>
<View>
<MaterialCommunityIcons
name="security"
size={30}
style={{ paddingLeft: 10, color: "#f5bd1f" }}
/>
</View>
Drive confidently
</Text>
<Text
style={{ paddingLeft: 80, marginTop: 20, paddingBottom: 40 }}
>
{
"Drive confidently with your choice \nof protection plans - all plans \ninclude varying levels of third party \nliability insrurance from Liberty \nMutual and physical damage \nprotection from Rent in Car that caps\nyour out of pocket responsibility for \ndamage to your host's car during \nyour trip."
}
</Text>
</View>
<Text
style={{
fontWeight: "bold",
fontSize: 24,
alignItems: "center",
color: "#f5bd1f",
paddingLeft: 150,
}}
>
/ / / / /
</Text>
<View style={{ marginTop: 30 }}></View>
</View>
</View>
</ScrollView>
</View>
</SafeAreaView>
);
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
red: {
color: "red",
},
});
}
History.js
import moment from "moment";
import React, { useState } from "react";
import Firebase from "../../config/firebase";
import ProductsList from "../../components/productsList/ProductsList";
import {
FlatList,
Text,
View,
Image,
TouchableWithoutFeedback,
TextInput,
ActivityIndicator,
} from "react-native";
import { Colors } from "../../staticValues/Colors";
import { Devicewidth, productCardWidth } from "../../staticValues/Dimensions";
import { useEffect } from "react";
import { styles } from "../../styles/authStyle";
import { FontAwesome5 } from "@expo/vector-icons";
import { I18n } from "../../helper/Multilanguage";
export default function HistoryList({ navigation }) {
const [filtredList, setfiltredList] = useState([]);
const [isFetching, setisFetching] = useState(false);
const [allProduct, setallProduct] = useState([]);
const [searchInput, setsearchInput] = useState("");
const [visible, setVisible] = React.useState(true);
function onRefresh() {
getAllProdcuts();
}
function getAllProdcuts() {
setisFetching(true);
Firebase.firestore()
.collection("Products")
.get()
.then((docRef) => {
var list = [];
docRef.forEach((elm) => {
list.push(elm.data());
});
setfiltredList(list);
setallProduct(list);
setisFetching(false);
})
.catch((error) => {
console.log({ error });
setisFetching(false);
});
}
useEffect(() => {
getAllProdcuts();
const willFocusSubscription = navigation.addListener("focus", () => {
getAllProdcuts();
});
return willFocusSubscription;
}, []);
return (
<View
style={{
flex: 1,
}}
>
<View
style={{
width: "80%",
backgroundColor: Colors.lightGray,
borderRadius: 30,
height: 45,
marginBottom: 5,
justifyContent: "center",
padding: 20,
alignSelf: "center",
marginTop: 10,
}}
>
<FontAwesome5
name={"search"}
size={26}
color={"black"}
style={styles.inputIcon}
/>
<TextInput
style={styles.loginpass}
placeholder={I18n.t("searchProduct")}
placeholderTextColor="#fff"
onChangeText={(input) => {
setsearchInput(input);
// filter list
const SearchResult = allProduct.filter((product) =>
product.title.toLowerCase().includes(input.toLocaleLowerCase())
);
setfiltredList(SearchResult);
}}
/>
</View>
<View
style={{
alignItems: "center",
flex: 1,
}}
>
<FlatList
ListEmptyComponent={() => {
return (
<View>
{!isFetching && (
<Text
style={{
textAlign: "center",
color: Colors.accentColor,
fontWeight: "bold",
paddingVertical: 20,
}}
>
{I18n.t("noProduct")}
</Text>
)}
</View>
);
}}
onRefresh={() => onRefresh()}
refreshing={isFetching}
keyExtractor={(item) => item.image}
numColumns={2}
data={filtredList}
renderItem={({ item }) => {
return (
<TouchableWithoutFeedback
onPress={() => {
navigation.push("ProductDetails", {
selectedProduct: item,
});
}}
>
<View
style={{
backgroundColor: "white",
alignItems: "center",
padding: 3,
elevation: 4,
borderRadius: 10,
margin: 6,
}}
>
<View>
<Image
source={{ uri: item.image }}
style={{
height: productCardWidth,
width: productCardWidth,
borderRadius: 10,
marginBottom: 5,
zIndex: 1,
}}
/>
<View
style={{
alignItems: "center",
justifyContent: "center",
height: productCardWidth,
width: productCardWidth,
position: "absolute",
backgroundColor: Colors.lightGray,
borderRadius: 10,
marginBottom: 5,
zIndex: 0,
}}
>
<ActivityIndicator
color={Colors.accentColor}
size={"small"}
style={{
top: 10,
right: 10,
position: "absolute",
}}
/>
<FontAwesome5
name={"image"}
size={26}
color={"black"}
style={
{
// position: "absolute",
}
}
/>
</View>
</View>
<Text
style={{
color: Colors.dark,
fontWeight: "bold",
fontSize: 16,
}}
>
{item.title.length > 12
? item.title.slice(0, 12) + "..."
: item.title}
</Text>
<Text
style={{
fontWeight: "bold",
}}
>
{item.price} {item.currency}
</Text>
</View>
</TouchableWithoutFeedback>
);
}}
/>
</View>
</View>
);
}
这是 HomeStack
import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Home from "../screens/home/Home";
import Profile from "../screens/profile/Profile";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import Messages from "../screens/messages/Messages";
import ProductStack from "./ProductStack";
import { Colors } from "../staticValues/Colors";
import SellProductForm from "../components/sellProduct/SellProductForm";
import History from "../components/history/History";
import ChatStack from "./ChatStack";
import AllMessages from "../screens/messages/AllMessages";
import { I18n } from "../helper/Multilanguage";
export default function HomeStack() {
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
return (
<Tab.Navigator
initialRouteName="Search"
screenOptions={{
tabBarActiveTintColor: Colors.mainColor,
tabBarActiveTintColor: Colors.mainColor,
tabBarHideOnKeyboard: true,
}}
>
<Tab.Screen
name="ProductStack"
component={ProductStack}
options={{
headerShown: false,
tabBarLabel: I18n.t("Search"),
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="magnify" color={color} size={size} />
),
}}
/>
<Tab.Screen
name={I18n.t("myProducts")}
component={History}
options={{
tabBarLabel: I18n.t("Trips"),
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="road-variant"
color={color}
size={size}
/>
),
}}
/>
<Tab.Screen
name="Messages"
component={ChatStack}
options={{
tabBarLabel: I18n.t("messages"),
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="message-outline"
color={color}
size={size}
/>
),
}}
/>
<Tab.Screen
name="SellProductForm"
component={SellProductForm}
options={{
tabBarLabel: I18n.t("Host"),
title: "Host",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="car" size={size} />
),
}}
/>
<Tab.Screen
name={I18n.t("More")}
component={Profile}
options={{
tabBarLabel: I18n.t("More"),
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="dots-horizontal"
color={color}
size={size}
/>
),
}}
/>
</Tab.Navigator>
);
}
这是productStack
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import React from "react";
import { I18n } from "../helper/Multilanguage";
import Home from "../screens/home/Home";
import ProductDetails from "../screens/product/ProductDetails";
export default function ProductStack() {
const Stack = createNativeStackNavigator();
return (
<Stack.Navigator>
<Stack.Screen
options={{
title: I18n.t("home"),
}}
name="Home"
component={Home}
/>
<Stack.Screen
options={{
title: I18n.t("productDetails"),
}}
name="ProductDetails"
component={ProductDetails}
/>
</Stack.Navigator>
);
}
这是 root.js
import React, { useState, useEffect } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import AuthStack from "./AuthStack";
import HomeStack from "./HomeStack";
import Firebase from "../config/firebase";
import { Text } from "react-native";
import { setCurrentUser } from "../staticValues/CurrentUser";
import Splach from "../components/Splach";
export default function Root() {
const Stack = createNativeStackNavigator();
// Set an initializing state whilst Firebase connects
const [initializing, setInitializing] = useState(true);
const [user, setUser] = useState();
// Handle user state changes
function onAuthStateChanged(curentUser) {
setCurrentUser(curentUser);
setUser(curentUser);
if (initializing) setInitializing(false);
}
useEffect(() => {
const subscriber = Firebase.auth().onAuthStateChanged(onAuthStateChanged);
return subscriber; // unsubscribe on unmount
}, []);
if (initializing) {
return <Splach />;
} else {
return (
<NavigationContainer>
{user ? (
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen name="HomeStack" component={HomeStack} />
</Stack.Navigator>
) : (
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen name="AuthStack" component={AuthStack} />
</Stack.Navigator>
)}
</NavigationContainer>
);
}
}
【问题讨论】：
-
你能不能也分享一下 routes.js 文件（包含应用的所有导航）> 我相信 History.js 和 Home.js 在不同的堆栈中，“ProductDetails.js”在Home.js 堆栈！如果您共享您的 routes.js 文件，我可以帮助您解决问题
-
感谢您的回复。文件已添加，请查收
-
你好，你有机会看看吗？ @Gavin D'mello
-
是的，找到了您的问题。您当前位于不同的选项卡/堆栈中，即历史堆栈，但您正在访问的文件位于 ProductStack 中，因此当您调用导航器时，它会执行它应该执行的操作，即。导航到 ProductDetails 页面，但由于它是在 ProductStack 中声明的，因此更新本身会发生在那里。我正在为您添加导航解决方案作为下面的答案。请检查它，如果它有效，请给它一个赞成票，如果它有意义的话，请给这个评论。
-
我刚刚发布了解决方案。请检查
标签： javascript reactjs react-native expo react-navigation