标签: react-navigation-v5

我正在使用 React Navigation 版本 5 创建一个 React Native 应用程序，我有一个底部选项卡导航器，其中一个堆栈导航器嵌套在选项卡导航器的每个屏幕内。我只希望底部标签栏显示在每个堆栈导航器的第一页上。这是一个显示我的应用程序基本导航功能的小吃：https : //snack.expo.io/@brforest/hide-tab-1。根据底部选项卡文档，有一个 tabBarVisible 选项属性，但是：

隐藏标签栏会导致故障和跳跃行为。我们建议改用堆栈导航器内的选项卡导航器。

在堆栈导航器中嵌套选项卡导航器的指南在这里。我尝试使用这种方法，但如果我只有一个堆栈导航器，我只能让它工作，但我需要为每个选项卡屏幕都有一个堆栈导航器。这是我（未成功）尝试在上一个小吃的同一应用程序上使用此方法：https : //snack.expo.io/@brforest/hide-tab-2。在此，我在单个堆栈导航器中嵌套了多个选项卡导航器，以尝试推断文档中建议的方法。正如您在本小吃中看到的，堆栈中的导航不再起作用，但选项卡仍然起作用。

对我来说，将堆栈导航器嵌套在选项卡导航器中（就像我在第一个小吃中那样）比尝试将相同的选项卡导航器嵌套在大型堆栈导航器中更有意义。但是，我想遵循文档并找到一种不会导致“故障和跳跃行为”的方法。关于如何实现我想要的导航功能的任何建议？

谢谢！

我需要使用 React 导航选项卡和 tabBarComponent 创建自定义的可滚动顶部选项卡栏，而不使用任何其他第三方库。

const TopTabBar = createMaterialTopTabNavigator({
    Home: HomePage,
    Entertainment: EntertainmentNews,
    Business: BusinessStack,
    Music: MusicStack,
    Politics: PoliticsStack,
    Sports: SportsStack,
    Technology: TechnologyStack,
    WorldNews: WorldNewsStack
}, {
    tabBarComponent: (props) => <TopTabBarComponent {...props}/>
})

在此使用选项卡栏组件时，我可以创建顶部栏，但滑动屏幕时它不会滚动？

import React , { Component } from 'react'
import { Text, View, StyleSheet, FlatList, TouchableOpacity, Animated, Dimensions} from 'react-native'

interface Props {
    navigation?: any
}

interface State {
    //
}

export class TopTabBarComponent extends Component <Props, State>{
    flatListRef
    constructor(props: Props, state: State){
        super(props, state)
    }





    onPressItem …

我有 2 个用于导航的库。React 导航 v5 和 React-native-tab-view。反应导航中的 3 个选项卡：主页/发现/个人资料。Discover 是一个具有反应本机选项卡视图的屏幕。我的主页中有几个按钮，按下它们后，它们应该导航到“发现”选项卡和选项卡视图中的特定选项卡。现在，我使用反应导航进行了从“主页”到“发现”的导航。但是，导航到“发现”后如何跳转到特定选项卡？

这是主页中的一个元素，其中包含将我从主页导航到发现的按钮：

render() {
    const { error, pending, refresh, videos } = this.props;

    return (
      <HomeViewItem
        headerText={'Top Videos'}
        footerText={'More Videos'}
        navigate={() =>
          this.props.navigation.navigate('TabNavigator', {
            screen: 'Discover',
          })  // this will navigate me to Discover
        }
        view={this._renderVideos(videos, pending, error, refresh)}
      />
    );
  }

这是“发现”屏幕中的选项卡视图：

export default class DiscoverTabView extends React.Component<DiscoverProps> {
  _StreamsRoute = () => <StreamsTabScreen navigation={this.props.navigation} />;
  _NewsRoute = () => <NewsTabScreen navigation={this.props.navigation} />;
  _VideosRoute = () => <VideosTabScreen navigation={this.props.navigation} />; …

我已经使用react-navigation版本5创建了嵌套导航，但是当选项卡屏幕渲染时我需要隐藏顶部栏，我已经按照这里的步骤https://reactnavigation.org/docs/hiding-tabbar-in-screens/但仍然不起作用

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

import {navigationRef} from './NavigationService';

import {Home, Appointment, Settings, Map, ProviderDetails} from 'app/screens';
import {PRIMARY_COLOR, SECONDARY_COLOR} from '../config/color';
import ThemeController from '../components/ThemeController';
import {StatusBar} from 'react-native';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

const Stack = createStackNavigator();

const homeOptions = {
  title: 'Home',
  headerTitleStyle: {
    fontWeight: 'bold',
  },
  headerRight: () => <ThemeController />,
};

const HomeStack = () => …

我正在尝试制作标题，在使用 React-Native React Navigation 5向下滚动时，该标题将从透明变为纯不透明颜色。

滚动到一半时开始过渡到不透明

达到最大偏移量时变得完全不透明

我感到惊讶的是useLinkTo，类似的 ( useNavigation) 只能在导航器屏幕内使用，而它们真正需要的只是NavigationContainer.

因为我的场景是一个包装整个应用程序的通知系统，其通知应该能够链接到应用程序中的其他部分。

<NavigationContainer linking={linking}>
  <Notifications>
    <RootStack/>
  </Notifications>
</NavigationContainer>

现在它位于RootStack像这样的钩子之外useLinkTo，useNavigation不起作用并抱怨缺少上下文：

“找不到导航对象。您的组件是否位于导航器的屏幕内？”

是否有使用裸露导航容器（参考）进行深度链接的解决方法？

我尝试将Notifications提供者移至内部RootStack，但这没有帮助。

我想在底部选项卡的顶部添加一行，如何添加？像这个问题https://github.com/react-navigation/react-navigation/issues/8957

反应导航版本：

"@react-navigation/bottom-tabs": "^5.9.2",
"@react-navigation/native": "^5.7.6",
"@react-navigation/stack": "^5.9.3",
"react": "16.13.1",
"react-native": "0.63.3",

大家好，我是反应原生新手，遇到了导航问题。我已经浏览了与此相关的每个问题，但发现没有任何帮助。

我有这样的导航结构

选项卡导航器

1. HomeStack [主屏幕，屏幕2]

2. PostStack[cameraScreen,UploadPostScreen]

现在我想在上传帖子后导航到 HomeStack 的主屏幕，同时我想删除这些帖子和上传屏幕，这样我就无法通过按后退按钮返回。

如何在 React Navigation 的嵌套导航器中实现深度链接。这里我有一个嵌套的堆栈导航器：

function AuthStack() {
  return (
    <Stack.Navigator>
        <Stack.Screen component={Login} name="Login" />  // deep link this screen
        <Stack.Screen component={ResetPassword} name="ResetPassword" />
    </Stack.Navigator>
  );
}

它嵌套在另一个主堆栈导航器中：

const linking = {
  prefixes: ["wagal://"],
  config: {
    screens: {
      AuthStack: "login",  // this doesn't reference `Login` screen on deep linking
    },
  },
};

function homeStack() {
  return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator>
        <Stack.Screen component={AuthStack} name="AuthStack" />  // here
        // ...
      </Stack.Navigator>
    </NavigationContainer>
  );
}

我尝试深层链接“wagal://login/”来进行Login筛选：

screens: {
  AuthStack: "login",
},

但没有成功，我也尝试过： …

在第 4 版中，我在 contentComponent 中使用 DrawerItems onItemPress 重置了 StackNavigation：

const AppDrawerNavigator = createDrawerNavigator(
  {
    Stack1: {
       screen: Stack1,
       navigationOptions: { // options}
   },
   Stack2: {
      screen: Stack2,
      navigationOptions: { // options}
   },
  {
    initialRouteName: 'Stack1',
    contentOptions: {
      activeTintColor: '#346bc7',
    },
    contentComponent: props => {
      return (
        <ScrollView>
          <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }} >
            <DrawerItems {...props} onItemPress={router => {
              const navigateAction = NavigationActions.navigate({
                routeName: router.route.routeName,
                params: {},
                action: NavigationActions.navigate({ routeName: router.route.routes[0].routeName }),
              });
              props.navigation.dispatch(navigateAction);
            }}
            />
          </SafeAreaView>
        </ScrollView>
      ) …

我在将 react-navigation 从 v3 升级到 v5 时遇到了一些麻烦。我一直遇到这个错误，起初我认为这是一个错误，但我没有在网上找到任何其他关于它的投诉。为了 100% 确定旧版本没有引起任何问题，我完全卸载了所有 react-navigation 并从头开始使用 v5。我仍然收到索引文件错误。它似乎不理解打字稿......这是一个已知的错误吗？关于安装 Typescript 的文档中没有我需要采取的另一个步骤吗？

更新：./types 文件没有正确编译...它似乎无法识别 NavigationState 或 ActionHelpers...这是一个错误吗？有没有人见过这个？

更新 2 我在 RN V0.59 上运行，所以我认为可能存在依赖性问题。我正在升级到 V0.62.2，看看问题是否仍然存在

https://reactnavigation.org/docs/getting-started

语法错误：/Users/myusername/myprojectname/node_modules/@react-navigation/stack/src/index.tsx：意外令牌 (51:12)

49 | * 类型 50 | */

51 | 导出类型 { | ^ 52 | 堆栈导航选项，53 | StackNavigationProp, 54 | StackHeaderProps，

我正在将我的应用程序从 react-navigation 4 升级到 5。

在版本 4 中，我有一个选项卡可以使用以下代码打开抽屉

const MainNavigator = createBottomTabNavigator(
  {
More: {      
      screen: AdminNavigator,
      navigationOptions: {
        tabBarIcon: (tabInfo) => {
          //return <Ionicons name="ios-star" size={25} color={tabInfo.tintColor} />;
          return (
            <Icon
              name="tune"
              color={tabInfo.tintColor}
              size={tabInfo.focused ? 32 : 28}
              style={{
                paddingTop: 10,
              }}
            />
          );
        },
        tabBarColor: Colors.primary,       
        tabBarOnPress: ({ navigation }) => {
          navigation.openDrawer();
        },
      },
    },
}

在新版本 5 中，我有以下导航配置

<NavigationContainer>          
    <Drawer.Navigator>
       <Drawer.Screen name="Home" component={TabsScreen} />
       <Drawer.Screen name="Favorites" component={FavoritesStackScreen} />
       <Drawer.Screen name="Language" component={LanguageStackScreen} />
    </Drawer.Navigator>
</NavigationContainer>

其中 TabScreen …