react-navigation 相关问题

React Native Navigation - 自动返回上一屏幕，无需调用 goBack() 方法

我使用 createStackNavigator 进行普通导航，使用 createMaterialTopTabNavigator 进行选项卡导航 嵌套导航的行为很奇怪。我在 App.tsx 中有一个 StackNavigator，其中包含

异步存储时是否可以在标题中显示 ActivityIndicator？

我想知道每次使用 Jotai 库更改存储时是否可以在 Stack 导航器的标题中显示 ActivityIndicator？

React 导航，如何从完全不同的堆栈重置屏幕或整个堆栈

const ListStack = createStackNavigator(); 函数列表页（）{ 返回 （ const ListStack = createStackNavigator(); function ListPage() { return ( <ListStack.Navigator screenOptions={{headerShown: false}}> <ListStack.Screen name="List" component={ListStackComponent} /> <ListStack.Screen name="ItemDetail" component={ItemDetailComponent} /> </ListStack.Navigator> ); } const ItemPaymentStack = createStackNavigator(); function PaymentPage() { return ( <ItemPaymentStack.Navigator screenOptions={{headerShown: false}}> <ItemPaymentStack.Screen name="Payments" component={Payments} /> </ItemPaymentStack.Navigator> ); } const AppDrawer = createDrawerNavigator(); <AppDrawer.Navigator screenOptions={{headerShown: false}} > <AppDrawer.Screen name="ListPage_stack" component={ListPage}/> <AppDrawer.Screen name="Payment_stack" component={PaymentPage}/> </AppDrawer.Navigator> 我有 2 个堆栈导航器，如上所述， 在物品列表页面。通过使用此代码，应用程序导航到项目详细信息页面。 navigation.navigate('ItemDetail', {key: item_id, item_id: item_id}); 通过按商品详细信息页面上的付款选项，应用程序使用以下代码导航到付款页面。 navigation.navigate('Payment_stack', { screen: 'Payments'}); 现在，我的问题是当用户导航回列表页面时如何重置/清除数据或卸载付款屏幕，因为从列表中选择另一个项目后，付款屏幕会显示以前的项目数据，直到我使用 useFocusEffect 清除页面。 有没有办法从列表页面清除付款屏幕或完全删除列表页面上的付款堆栈？ 是的，您可以使用很多方法来解决这个问题。我建议你使用Redux: 选择项目后，将所选项目发送到存储。 在Payment类中，只要听一下item，每次进入Payment页面都会得到最新的item

反应导航：导航导致应用程序在博览会客户端上崩溃

我有以下导航堆栈。我正在尝试从登录导航到注册。一切似乎在 Android 模拟器上运行得很好。但是当我尝试在世博会上使用 Android 手机导航时...

如何在用户许可的情况下在 React Native 中按字母顺序检索和排序联系人列表？

我正在开发一个 React Native 项目，需要实现一个功能来检索用户的联系人列表，包括姓名和联系电话，并按字母顺序对它们进行排序。 我想确保...

expo-router@2：在相同路线之间导航时，自定义选项会破坏动画

我在使用自定义屏幕选项时遇到了 expo-router@2 问题。当在相同的路线之间导航时就会出现问题，例如从 /[id] 到 /[id]。 没有自定义屏幕选项/...

如何使用 BottomNavigator 中的菜单按钮实现抽屉的切换？

//底部导航器 （{ tabPress: e => { e.

如何在TypeScript中使用navigation.replace？

我正在尝试在我的代码中使用它： const 导航 = useNavigation(); 导航.replace('AllFriends') 但我不断收到错误消息： “NavigationProp”类型上不存在属性“replace”...

在多个 React Navigation 导航器中重复使用相同的屏幕，无需复制粘贴

我目前有一个 BottomTabNavigator，其中有五个堆栈导航器。有些屏幕应该可以从每个选项卡访问，因此我基本上已将它们“复制粘贴”到每个导航器中。它工作正常...

React web 刷新后忘记导航

我们有React网站，我们正在使用redux，useParams并且数据来自api，我们从redux获取一些数据并使用params将其传递给api，以便我们可以显示动态响应，网站...

React-Navigation，嵌套导航问题

我需要根据条件在两个堆栈组之间导航（如果用户允许权限 - 导航到不同的堆栈组，否则停留在用户可以允许权限的屏幕中...

React useNavigate 未转到所需页面

我正在创建基本的反应应用程序，但在设置导航时遇到问题。下面是导航栏组件的代码，一旦用户单击注销按钮，应清除

React Navigation 和 Expo BarCodeScanner 的问题

我注意到，每当我进入扫描仪组件所在的屏幕时，我的应用程序都会自动断开连接。我正在使用 React Native Firebase 作为身份验证库和 React navi...

material-top-tabs 中的 ReactNative Horizontal ScrollView（嵌套 ScrollView）

我目前正在尝试在react-navigaionmaterial-top-tabs（也水平滚动）的内容中定位水平ScrollView。 预期的行为： 当在...内拖动时

向抽屉导航添加自定义图标

我正在尝试将自定义图标添加到我的 CustomDrawerComponent，但没有任何反应...... 应用程序.js： 常量导航选项 = { headerTintColor：颜色.白色， }; const DrawerNavigationOption = ({ 导航...

单击添加按钮但导航至显示页面

我想添加而不导航到显示页面，但是当我单击添加按钮时，它会导航到显示页面，然后添加。我对删除按钮也有同样的问题。 在此输入图像描述 它

在新屏幕上显示照片时出现问题 - React

我创建了两个文件（ profile.js 和 postImage.js ）。 profile.js 屏幕显示照片列表，类似于 Instagram 个人资料屏幕。当用户单击照片时，会显示同一张照片

如何访问 Stack Navigator 的 screenOptions 属性中的导航属性？

我想使用堆栈导航器中的通用标题按钮导航到特定屏幕。 我想使用堆栈导航器中的通用标题按钮导航到特定屏幕。 <NavigationContainer> <RootStack.Navigator mode="modal" screenOptions={{ headerTitleAlign: 'center', headerTitle: () => <SpreeLogo />, headerRight: (props) => <MaterialIcons style={{ marginHorizontal: 10, }} onPress={() => console.log(props)} name="clear" size={28} color="black" /> }} > 在标题右侧图标中，我想访问导航道具。我尝试过控制台记录道具，但没有道具作为导航。如何访问它？ 根据文档，您可以向 screenOptions 提供一个函数，如下所示，这将使您可以访问导航，并且从那里您应该能够跳转到任何屏幕 <NavigationContainer> <RootStack.Navigator mode="modal" screenOptions={({ route, navigation }) => ({ headerTitleAlign: 'center', headerTitle: () => <SpreeLogo />, headerRight: (props) => <MaterialIcons style={{ marginHorizontal: 10, }} onPress={() => console.log(route, navigation)} name="clear" size={28} color="black" /> })} >... 在此处阅读文档 https://reactnavigation.org/docs/stack-navigator 并搜索 screenOptions。 祝你好运 在 React Navigation V6 中，你可以为选项提供一个函数 <Stack.Screen name="Screen" component={Screen} options={({ route, navigation }) => ({ headerTitleAlign: "center", headerLeft: () => ( <Icon name="arrow-back" onPress={() => navigation.goBack()} color="#fff" size={25} /> ), })} /> useNavigation 钩子 在根导航器中，可以使用v6.x React导航文档中记录的useNavigation钩子访问Navigation属性。 useNavigation 是一个可以访问导航对象的钩子。当您无法将导航道具直接传递到组件中，或者不想在深度嵌套的子组件的情况下传递它时，它非常有用。 useNavigation() 返回其所在屏幕的导航属性。 React Navigation 文档中的示例： import * as React from 'react'; import { Button } from 'react-native'; import { useNavigation } from '@react-navigation/native'; function MyBackButton() { const navigation = useNavigation(); return ( <Button title="Back" onPress={() => { navigation.goBack(); }} /> ); } 使用OP代码的示例： export function MyScreen() { //Hook to access the navigation prop of the parent screen anywhere. // @returns — Navigation prop of the parent screen. const navigation = useNavigation(); return( <NavigationContainer> <RootStack.Navigator mode="modal" screenOptions={{ headerTitleAlign: 'center', headerTitle: () => <SpreeLogo />, headerRight: (props) => <MaterialIcons style={{ marginHorizontal: 10, }} onPress={() => navigation.navigate('Somewhere') } name="clear" size={28} color="black" /> }} ) }

如何将状态变量作为 CommonActions.reset() 中指定的路由的参数传递？

我怀疑 navigation.dispatch(CommonActions.reset()) 正在重置状态，然后才能将其作为参数传递。 这是我的设置： 我定义了一个状态变量，例如： const [测验ID，设置测验ID] =

React 导航无需导入“react-native-gesture-handler”；

我们使用 React 导航创建了 React Native 应用程序，但忘记添加 导入“反应本机手势处理程序”； 应用程序在生产中偶尔显示空白屏幕。 是否有可能缺少导入...