[英]React Native navigating between two screens back & forth
I have Home screen where we search for an ItemCode, after we search ItemCode it will get details from API & screen will navigate to Screen 1 (Item Details Screen) & from Screen 1 we have a search for ItemNutrients and after search it will get Nutrients & Navigate to Screen 2 (Nutrients Screen)我有主屏幕,我们在其中搜索 ItemCode,搜索 ItemCode 后,它将从 API 获取详细信息,屏幕将导航到屏幕 1 (项目详细信息屏幕),从屏幕 1 我们搜索 ItemNutrients,搜索后它将获取 Nutrients & 导航到屏幕 2 (营养屏幕)
In other words换句话说
Home -> Screen 1 (Item Details Screen) -> Screen 2 (Nutrients Screen)主页 -> 屏幕 1(项目详细信息屏幕)-> 屏幕 2(营养屏幕)
After getting the necessary details from API from search for Item Details & Nutrients, User can navigate between Item Details & Nutrients back and forth..从 API 通过搜索项目详细信息和营养素获得必要的详细信息后,用户可以在项目详细信息和营养素之间来回导航。
I could navigate from Screen 1 (item Details) to Screen2 (Nutrients Screen) and swipe back to Screen 1 (item Details) but how could I swipe forward to look at Screen 2 (Nutrients Screen) again without searching for nutrients in Screen 1 as I already have the data from API for Nutrients.我可以从屏幕 1 (项目详细信息)导航到屏幕2(营养屏幕)并滑回屏幕 1 (项目详细信息),但是我如何才能向前滑动以再次查看屏幕 2 (营养屏幕)而不在屏幕 1中搜索营养我已经有来自 API 的营养素数据。
Any ideas on how to implement this?关于如何实现这一点的任何想法? this is basically navigate to Screen 1 to Screen 2 on search from Screen 1 or if Screen 2 search is already done and we have data so swipe forward should navigate to Screen 2 , I can have a button to navigate to Screen 2 , the button on Screen 1 conditinally appears only when we have API data for Nutrients Screen and it will navigate to Screen 2 on that button click, but i need swipe functionality as well to navigate forward这基本上是从屏幕 1 搜索时导航到屏幕 1到屏幕 2 ,或者如果屏幕 2搜索已经完成并且我们有数据,所以向前滑动应该导航到屏幕 2 ,我可以有一个按钮导航到屏幕 2 ,按钮打开屏幕 1 仅在我们有营养屏幕的 API 数据时才会出现,并且它会在该按钮单击时导航到屏幕 2 ,但我还需要滑动功能才能向前导航
I have Home, Screen 1, Screen 2 in stackNavigator, is it alright or i could use any other navigators to achieve this.我在 stackNavigator 中有 Home、Screen 1、Screen 2,可以吗,或者我可以使用任何其他导航器来实现这一点。
I have researched how to do this and can't find it in the docs anywhere.我已经研究了如何做到这一点,但在任何地方的文档中都找不到。 Please let me know if I am missing it somewhere.如果我在某处遗漏它,请告诉我。 Thanks!谢谢!
Nutrition Context:营养背景:
import React, { createContext, useState, useEffect } from "react";
export const NutriSyncContext = createContext();
const DEFAULT_IS_NUTRI_SCANNED = false;
export const NutriSyncContextProvider = ({ children }) => {
const [isNutritionScanned, setisNutritionScanned] = useState(
DEFAULT_IS_NUTRI_SCANNED
);
// When we first mount the app we want to get the "latest" conversion data
useEffect(() => {
setisNutritionScanned(DEFAULT_IS_NUTRI_SCANNED);
}, []);
const nutrionScanClick = ({ navigation }) => {
setisNutritionScanned(true);
//navigation.navigate("NutritionFacts");
};
const contextValue = {
isNutritionScanned,
setisNutritionScanned,
nutrionScanClick,
};
return (
<NutriSyncContext.Provider value={contextValue}>
{children}
</NutriSyncContext.Provider>
);
};
inside navigation.js在navigation.js里面
const tabPNMS = createMaterialTopTabNavigator();
function tabPNMSStackScreen() {
const { isNutritionScanned } = useContext(NutriSyncContext);
console.log(isNutritionScanned);
return (
<tabPNMS.Navigator initialRouteName="PNMSNutrition" tabBar={() => null}>
<tabPNMS.Screen name="PNMSNutrition" component={PNMSNutrition} />
{isNutritionScanned ? (
<tabPNMS.Screen name="NutritionFacts" component={NutritionFacts} />
) : null}
</tabPNMS.Navigator>
);
}
and In stack Navigation:和堆栈导航:
const SearchStack = createStackNavigator();
const SearchStackScreen = () => (
<NutriSyncContextProvider>
<SearchStack.Navigator
initialRouteName="Search"
screenOptions={{
gestureEnabled: false,
headerStyle: {
backgroundColor: "#101010",
},
headerTitleStyle: {
fontWeight: "bold",
},
headerTintColor: "#ffd700",
headerBackTitleVisible: false, //this will hide header back title
}}
headerMode="float"
>
<SearchStack.Screen
name="Search"
component={Search}
options={({ navigation }) => ({
title: "Search",
headerTitleAlign: "center",
headerLeft: () => (
<Entypo
name="menu"
size={24}
color="green"
onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
/>
),
})}
/>
<SearchStack.Screen
name="NutriTabs"
options={() => ({
title: "PNMS",
headerTitleAlign: "center",
})}
component={tabPNMSStackScreen}
/>
</SearchStack.Navigator>
</NutriSyncContextProvider>
);
I have NutriSyncContextProvider around the stack, but when I click the button on my page it will call nutrionScanClick method in context class it works just fine but when i do navigation.navigate to the NutritionFacts tab that is enabled i get error saying NutritionFacts tab doesn't exist我在堆栈周围有 NutriSyncContextProvider,但是当我单击页面上的按钮时,它会在上下文 class 中调用 nutrionScanClick 方法,它工作得很好,但是当我导航到启用的 NutritionFacts 选项卡时,我收到错误说 NutritionFacts 选项卡没有不存在
I got it working below is the code:我让它在下面工作是代码:
const nutrionScanClick = () => {
if (!isNutritionScanned) setisNutritionScanned(true);
else {
//Make a API call here for new data for the new scanned one's and then navigate
navigation.navigate("NutritionFacts");
}
};
useEffect(() => {
if (isNutritionScanned) {
navigation.navigate("NutritionFacts");
}
}, [isNutritionScanned]);
There's no swipe back n forth between screens in a stack navigator.堆栈导航器中的屏幕之间没有来回滑动。 You need to use a tab navigator to be able to keep multiple screens like that.您需要使用选项卡导航器才能保持这样的多个屏幕。
https://reactnavigation.org/docs/material-top-tab-navigator https://reactnavigation.org/docs/material-top-tab-navigator
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();
function MyTabs() {
return (
<Tab.Navigator tabBar={() => null}>
<Tab.Screen name="ItemDetails" component={ItemDetails} />
{showNutrients ? <Tab.Screen name="Nutrients" component={Nutrients} /> : null}
</Tab.Navigator>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.