标签: react-navigation-v5

我的 React Native 0.61.5 使用react-navigation 5.1. 这是根导航代码：

const BTab = createBottomTabNavigator();
const Stack = createStackNavigator();
export default function App() {

  //const Appscreen = () => (<AppScreen data={data}/>);

  return (
    <NavigationContainer>
      <Stack.Navigator InitialRouteName="Splash">
        <Stack.Screen name="Splash" component={SplashScreen}}/>
        <Stack.Screen name="App" component={AppScreen} } />
      </Stack.Navigator>

    </NavigationContainer>
  );
}

该组件AppScreen返回一个如下所示的堆栈：

return (
    <NavigationContainer independent={true}>
      <BTab.Navigator>
          <BTab.Screen name="Event" component={Eventstack} />
          <BTab.Screen name="Group" component={Groupstack} />
          <BTab.Screen name="Contact" component={Contactstack} />
      </BTab.Navigator>
    </NavigationContainer>
  );

我注意到屏幕上有双标题：

如何删除App标题并只保留Group？

我在我的项目中使用 React navigation 5，并且在项目中的某个地方我需要制作嵌套导航器，如下所示：

*Stack Navigator
**Material top tab navigatior
***Material bottom tab navigator
**** Stack Navigator

我的目标是，实际上我想要拥有 3 个像 Instagram 一样的静态屏幕。左侧是相机，中间是实际内容，右侧是其他内容。只有当你位于中心时，我才希望底部选项卡可见，这就是我这样创建它的原因。在这种情况下，在所有屏幕中，您可以向右或向左滑动以到达相机或右侧组件。

但我想做的是，我想在中心组件的详细屏幕中“禁用”滑动操作。因为中心组件是上面的材质底部选项卡导航器，还包含一些堆栈导航器，例如 posts、postDetail。当我转到 postDetail 时，我想禁用向左或向右滑动操作。因为在某些细节上我使用了一些可滑动的元素，例如反应本机滑动器等。

我试图提供gesturesEnabled: false , swipeEnabled: false材质底部导航器作为道具，但它不起作用，因为它是底部选项卡导航器并且不接受这些参数。

我还尝试捕获状态索引，如果它大于 0 或 1，我将禁用它，但在材料顶部选项卡导航器中，当我转到 postDetail 时，导航器不会更改索引。它不像以前的版本（react navigation 4）那样工作。

*Stack Navigator
**Material top tab navigatior
***Material bottom tab navigator
**** Stack Navigator

我正在将 TypeScript 添加到我的 React Native/React Navigation 5 Navigator 中，但在添加EventStackParams到createStackNavigator().

我浏览了React Native 5 Docs、StackOverflow 和 GitHub，但没有成功。我究竟做错了什么？下面是我的错误和代码

错误：

Type 'EventStackParams' does not satisfy the constraint 'Record<string, object | undefined>'.

Index signature is missing in type 'EventStackParams'.ts(2344)

导航.tsx：

// Imports: TypeScript Types
import { EventStackParams } from '../types/types';

// React Navigation: Stack Navigators
const RootStack = createStackNavigator();
const EventsStack = createStackNavigator<EventStackParams>();

// Events Navigator
const EventsNavigator = () => (
  <EventsStack.Navigator initialRouteName="Events">
    <EventsStack.Screen
      name="Events"
      component={Events}
      options={{
        title: …

我无法找出嵌套导航器。我有一个带有这些按钮的bottomTabNavigator：

Home
Stations
  -> StationDetail (StationScreen)
Shows
  -> ShowDetail (ShowScreen)

在我的主页选项卡上，我有与电台页面相同的电台的水平滚动。

问题：当我使用此代码从主页导航到电台详细信息页面以导航到嵌套导航器时，我无法导航回主/根 StationsScreen 选项卡

navigation.navigate('Stations', {
      screen: 'Station',
      station: props.station,
    });

但是，如果我先导航到“电台”选项卡，然后返回主页，然后单击一个电台，它就会按预期工作。我该如何解决这个问题？我见过“重置”之类的东西，但我不确定该把它放在哪里。这是我的代码的简化摘录：

应用程序堆栈.js：

import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import HomeStack from './HomeStack';
import StationStack from './StationStack';
import ShowStack from './ShowStack';

const Tab = createBottomTabNavigator();

const AppStack = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Stations" component={StationStack} />
      <Tab.Screen name="Shows" component={ShowStack} />
    </Tab.Navigator>
  );
};

export default AppStack;

HomeStack.js

import React from 'react'; …

我无法让堆栈导航器响应本机工作。我只是制作空白堆栈导航器以进入bottomTabsNavigator。我收到一个关于使用 route.key 的错误。即使我制作了一个简单的 Stack 导航器，我仍然会收到此错误，并且似乎在网上的任何地方都看不到任何提及。任何帮助将不胜感激:)

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

import Icon from 'react-native-vector-icons/MaterialIcons';
import CartScreen from './screens/CartScreen'
import RecipeScreen from './screens/RecipeScreen'
import ProfileScreen from './screens/ProfileScreen'

const Stack = createStackNavigator();


function Navigator() {

    return (

        <NavigationContainer>

            <Stack.Navigator
                screenOptions={({ route }) => ({
                    headerStyle: {
                        backgroundColor: 'salmon',
                    },
                    headerTintColor: 'white',
                    headerTitleStyle: {
                        fontWeight: 'bold',
                    },
                })}
                tabBarOptions={{
                    showLabel: false,
                    activeTintColor: 'white',
                    inactiveTintColor: …

unsubscribe如您所知，在 useEffect 中，如果我们将任何侦听器分配给 const，我们会在最后返回 ，unsubscribe如下所示

当我们使用

useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
        // code
    })
    return unsubscribe;

}, [navigation]);

如我所愿

useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
        // code
    })
    const unsubscribe2 = navigation.addListener('blur', () => {
        // code
    })

    // need to return both listeners

}, [navigation]);

我正在使用 expo sdk41、react navigation 5 和 vercel 来部署使用expo build:web.

当我在本地开发时，我可以深度链接，例如http://localhost:19006/sign-in. 但是，当我将其部署到 vercel 并为其分配域名时，深层链接不再起作用。

我已经在执行以下操作，这允许深度链接在开发中工作：

export const linking = {
    prefixes: [Linking.createUrl('/'),
    screens: {
        ...
    }
}

为什么深度链接在开发中有效，而在部署到 vercel 时却无效？

如果需要，我很乐意添加更多信息。