标签: react-navigation

要添加一个额外的抽屉按钮，该按钮不链接到按钮上方或下方的路径，DrawerItemList就像执行以下操作一样简单：

  <Drawer.Navigator initialRouteName="Home" drawerContent={props => {
    return (
      <DrawerContentScrollView {...props}>
        <DrawerItemList {...props} />
        <DrawerItem label="Logout" onPress={() => props.navigation.navigate("Login")} />
      </DrawerContentScrollView>
    )
  }}>
    <Drawer.Screen name="Home" component={Home}/>
    <Drawer.Screen name="About" component={About} />
  </Drawer.Navigator>

但现在我需要在和按钮之间添加一个自定义按钮（如“注销”按钮，其自定义按钮onPress不仅会转到某个路线，还会导航到“主页”并调用几个功能）。HomeAbout

所以我关于抽屉上按钮的最终按钮结果应该是：

- 家

- 风俗

- 关于

- 登出

我需要以某种方式分手DrawerItemList，但不知道如何分手。

我有什么想法可以实现这一目标吗？

小吃都可以在这里找到

（使用反应导航> v5）

我目前正在开发 React Native (Expo) 应用程序，并且面临一些性能问题。我还没有找到我的问题的任何答案，所以我希望有人可以帮助我。

我的问题是，每当我在物理设备 (Galaxy S9+) 上启动应用程序并导航到不同的屏幕时，我都会注意到 JS 帧从 60 一路下降到 10-30 左右。我有一个主抽屉导航器、一​​个底部选项卡导航器和一些堆栈导航器。我有基本的视图，文本，...组件，所以我不认为这是由于重型组件。（我正在使用react-navigation v5）

我还必须提到的是，我在 iOS 模拟器上并没有真正看到任何性能不足或 JS FPS 下降的情况。

我是初学者，我需要为 tabBarButton 制作组件，我成功了。

问题是导航现在不起作用，因为我不知道如何编写 onPress 函数以使其起作用！

有人可以帮我解决这个问题吗？

这是我的组件，我在我的Tab.Navigator：

import React from 'react';
import {StyleSheet, TouchableOpacity, View} from 'react-native';
import Text from '../Text/Text';

interface Props {}

const NavBottomButton: React.FC<Props> = (props) => {
  const {children} = props;

  return (
    <TouchableOpacity onPress={() => {}} style={styles.navButton}>
      <View>
        <Text>{children}</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  navButton: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default NavBottomButton;

这是我使用组件的方式：

<Tab.Navigator
  tabBarOptions={someStyles}>
  <Tab.Screen
    name="Matches"
    component={Matches}
    options={{
      tabBarButton: (props) => (
        <NavBottomButton …

React Navigation 上的示例展示了如何跳转到选项卡，但它是在您位于选项卡所属的导航器中的情况下显示的。但是，如何从属于不同导航器的屏幕导航到特定选项卡？

我有：

function MealsNavigator() {
  const MealsStack = createStackNavigator();
  return (
    <MealsStack.Navigator>
      <MealsStack.Screen
        name="Meals"
        component={MealsScreenTabs}
      />
    </MealsStack.Navigator>
  );
}

function MealsScreenTabs() {
  const MealsTabs = createMaterialTopTabNavigator();
  return (
    <MealsTabs.Navigator>
      <MealsTabs.Screen name="Upcoming" component={MealsUpcomingScreen} />
      <MealsTabs.Screen name="Past" component={MealsPastScreen} />
    </MealsTabs.Navigator>
  );
}

我希望能够通过单击帐户导航器内的个人资料屏幕中的按钮导航至“膳食”>“过去”。如何？

在我的反应本机项目中，我正在使用库

"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",

我有嵌套的导航器，如下所示：

// root level I have a stack navigator where it contains two screens, `Home` and `Settings`.
const App = ()=> {
  const rootStack = createStackNavigator();
  return (
    <NavigationContainer>
      <rootStack.Navigator>
        <rootStack.Screen name="Home" component={Home} />
        <rootStack.Screen name="Settings" component={Settings} />
      </rootStack.Navigator>
    </NavigationContainer>
  );
}

// The Settings screen is a nested stack navigator
const Settings = ()=> {
  const settingsStack = createStackNavigator();
  return (
    <settingsStack.Navigator>
      <settingsStack.Screen name="SettingsOne" component={SettingsOneScreen} />
      <settingsStack.Screen name="SettingsTwo" component={SettingsTwoScreen} />
    </settingsStack.Navigator>
  );
}

正如您所看到的，“设置”屏幕实际上是另一个级别（嵌套）堆栈导航器。 …

给定以下导航器层次结构，构建链接配置对象的正确方法是什么？按照当前的构造，当尝试打开“myapp://bizpage/1”时，出现此错误：

从 URL 解析的导航状态包含根导航器中不存在的路由。这通常意味着链接配置与导航结构不匹配。有关如何指定链接配置的更多详细信息，请参阅https://reactnavigation.org/docs/configuring-links 。

我整个晚上都按照文档攻击谷歌。我不明白我哪里出错了。

有人能指出我正确的方向吗？

function AppNav({navigation}) {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="AuthFlow"
        component={AuthFlow}
      />
      <Stack.Screen
        name="DrawerNav"
        component={DrawerNav}
      />
    </Stack.Navigator>
  );
}

function AuthFlow({navigation}) {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Login"
        component={Login}
      />
      <Stack.Screen
        name="Signup"
        component={Signup}
      />
    </Stack.Navigator>
  );
}

function DrawerNav({navigation}) {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Home"
        component={Main}
      />
      <Drawer.Screen
        name="Profile"
        component={Profile}
      />
      <Drawer.Screen
        name="Notifications"
        component={NotificationsScreen}
      />
      </Drawer.Navigator>
  );
}

function Main({navigation}) {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="HomeScreen"
        component={HomeScreen}
      />
      <Stack.Screen
        name="BizPage"
        component={BizPage}
      />
      <Stack.Screen
        name="PeerProfile"
        component={PeerProfile} …

我想创建一个顶部选项卡导航器，并将两个屏幕 Badges.js 和 Studying.js 放入选项卡中，当我在设备上运行它时，我收到一条错误，显示“错误：元素类型无效：需要一个字符串...”并且“检查‘MaterialTopTabNavigator’的渲染方法”。

TabScreen.js

import React from 'react';
import {View, Image, Text} from 'react-native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import Badges from './Badge';
import Studying from './Studying';

const Tab = createMaterialTopTabNavigator();

const TabsScreen = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Badges" component={Badges} />
      <Tab.Screen name="Studying" component={Studying} />
    </Tab.Navigator>
  );
};
export default TabsScreen;

徽章.js

import React from 'react';
import {View, Image, Text} from 'react-native';

const Badges = () => {
  return (
    <View>
      <Text>Badges</Text> …

我正在创建一个应用程序并添加了 React 导航，但是当我尝试通过它时，tabBarOptions它显示以下错误：

No overload matches this call.
  Overload 1 of 2, '(props: Omit<DefaultRouterOptions<string> & { children: ReactNode; screenListeners?: Partial<{ tabPress: EventListenerCallback<BottomTabNavigationEventMap, "tabPress">; ... 4 more ...; beforeRemove: EventListenerCallback<...>; }> | ((props: { ...; }) => Partial<...>) | undefined; screenOptions?: BottomTabNavigationOptions | ... 1 more ... | undefined; defaultScreenOptions?: BottomTabNavigationOptions | ... 1 more ... | undefined; } & { ...; } & BottomTabNavigationConfig, "initialRouteName" | ... 3 more ... | "defaultScreenOptions"> & DefaultRouterOptions<...> & { ...; }, …

我是反应原生的初学者。如何useNavigation在 React 类组件中使用钩子？

我刚刚开始我的新项目。在我的 IOS 应用程序中安装react-navigation并使用它后，我收到一个错误Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.。我无法找出问题所在。

这是我的导航代码

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import strings from '../Constants/Strings';
import {Home} from '../Screens';

const Stack = createNativeStackNavigator();

export default MainStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name={strings.navHome} component={Home} />
    </Stack.Navigator>
  );
};

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import MainStack from './MainStack';

const Routes = () => {
  return (
    <NavigationContainer>
      <MainStack />
    </NavigationContainer>
  );
}; …