标签: react-navigation

使用：“@react-navigation/drawer”：“^5.4.0”，“@react-navigation/native”：“^5.1.4”，

应用程序.js：

    import { createDrawerNavigator } from '@react-navigation/drawer';
    ...
    const Drawer = createDrawerNavigator();
    const DrawerRender = () => {
    return (
      <NavigationContainer>
        <Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}>
          <Drawer.Screen name="Home" component={Home} />
          <Drawer.Screen name="Screen1" component={Screen1} options={{unmountOnBlur: true, gestureEnabled: false}} />
          <Drawer.Screen name="Screen2" component={Screen2} options={{unmountOnBlur: true, gestureEnabled: false}} />
        </Drawer.Navigator>
      </NavigationContainer>
    );}

从屏幕 1：

    navigateToPage = page_id => {
      this.closeCommentScreen();
      this.reopenModal = true;
      this.props.navigation.navigate('Screen2', {'page_id': 'testing'});
    }

在屏幕 2 上：

    export default class Screen2 extends React.Component {

    constructor(props) {
       super(props);
    } …

我尝试根据react-navigation配置链接文档为我的react本机应用程序编写配置对象。

我定义了一系列路径 --> 路由映射，包括 Chat:'feed' 和 Explore:'news'

我的目标是让应用程序在解析https://example.com/someusername时默认显示“个人资料”屏幕，并将“someusername”作为 id 参数传递。类似于https://instagram.com/apple直接映射到 @apple 帐户的个人资料屏幕。

const linking = {
  prefixes: ['https://example.com', 'example://'],
  config: {
    Home: {
      path: '',
      screens: {
        Chat: 'feed',
        Explore: 'news',
        Profile: ':id',
      },
    },
  },
}

我不会允许用户创建帐户@feed、@news等以避免冲突。如果“someusername”尚不存在，我还会显示“找不到用户”消息

有没有正确的方法来执行此配置对象？或者，如果我需要编写自定义 getStateFromPath / getPathFromState 函数，有人有示例吗？

我正在尝试实现一个简单的导航，但由于某种原因后退按钮没有显示。

我的主要组件

    <NavigationContainer>
      <Stack.Navigator>
        {userToken ? (
          <Stack.Screen name={routesName.App} component={TabNavigator} />
        ) : (
          <Stack.Screen name={routesName.Auth} component={AuthStack} />
        )}
      </Stack.Navigator>
    </NavigationContainer>

标签导航

const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name={routesName.Home} component={HomeStack} />
      <Tab.Screen name={routesName.Settings} component={SettingsStack} />
    </Tab.Navigator>
  );
};

const HomeStack = () => {
  return (
    <Stack.Navigator initialRouteName={routesName.Home}>
      <Stack.Screen name={routesName.Home} component={HomeScreen} />
      <Stack.Screen name={routesName.Details} component={DetailsScreen} />
    </Stack.Navigator>
  );
};

const SettingsStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name={routesName.Settings} component={SettingsScreen} />
      <Stack.Screen name={routesName.Profile} component={ProfileScreen} /> …

我正在尝试设置，因此当我更改系统主题时，我的本机应用程序主题也应该更改。我使用了反应导航和反应原生外观。在应用程序启动时应用了正确的系统主题，但是当我第一次使用应用程序时更改主题时却没有。但是当我第二次尝试更改系统主题时，它也会更改应用程序主题并正常工作。

这是我的代码：-

应用程序.js

import React from 'react';
import {} from 'react-native';
import {AppearanceProvider} from 'react-native-appearance';
import Main from './main';

export default function App() {
  
  return (
    <AppearanceProvider>
        <Main/>
    </AppearanceProvider>
  );
}

主程序

import React, { useState,useEffect } from 'react';
import {} from 'react-native';
import {Appearance} from 'react-native-appearance';
import {DarkTheme,DefaultTheme,NavigationContainer} from '@react-navigation/native';
import Home from './home';

const myDarkTheme={
    ...DarkTheme,
    colors:{
        ...DarkTheme.colors,    
        text:"#fff",
        statusBarColor:"#000"
    }
  };
  
  const myLightTheme={
    ...DefaultTheme,
    colors:{
        ...DefaultTheme.colors,
        text:"#000",
        statusBarColor:"rgb(242, 242, 242)"
    }
  };



export default function Main(){
    const …

我尝试自定义react-navigation抽屉（v 5.x），因为我想在抽屉标题中添加公司信息。但这并不好，因为将自定义抽屉组件添加到抽屉会废弃抽屉上已经可用的任何导航项目列表（所有屏幕的名称）。下面是我的代码：

const CustomDrawerContentComponent = (props) => {
  return (<ScrollView>
    
      <View style={styles.drawerHeader}>
        <View style={{flex:1}}>
        <Image source={require('./images/logo.png')} style={styles.drawerImage} />
        </View>
        <View style={{flex: 2}}>
          <Text style={styles.drawerHeaderText}>Ristorante Con Fusion</Text>
        </View>
      </View>

  </ScrollView>)
  
};

render(){
  return(
     <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home" drawerStyle={{
    width: 240,
  }} drawerContent={(props)=><CustomDrawerContentComponent {...props} />}>
        <Drawer.Screen name="Home" component={HomePage} options={{
          title: 'Home',
          drawerIcon: ({focused, size}) => (
            <Icon
              name="home"
              type="font-awesome"
              size={size}
              color={focused ? '#7cc' : '#ccc'}
            />
          )
        }}/>
        <Drawer.Screen name="Menu" component={MenuNavigator} options={{
          title: 'Menu',
          drawerIcon: ({focused, size}) => (
            <Icon
              name="list" …

我正在使用 react-navigation（版本 5）库构建一个 React Native 应用程序来实现导航。

我有一个选项卡导航器，每个选项卡上都包含一个堆栈导航器。每个堆栈导航器都有一个“登录页面”，即initialRouteName激活选项卡时显示的页面。

假设结构是：

Tabs
|
+-- Stack1
|     |
|     +-- Stack1LandingPage
|     |
|     +-- Stack1ContentPage
|
+-- Stack2
      |
      +-- Stack2LandingPage
      |
      +-- Stack2ContentPage

问题是，当我尝试直接从Stack1LandingPageto导航时Stack2ContentPage，Stack2堆栈如下：

Stack2ContentPage

因此标题上没有“返回”按钮可以返回到Stack2LandingPage.

我想要的是始终在每个堆栈的底部放置登录页面。因此，当我从Stack1LandingPageto导航时Stack2ContentPage，Stack2堆栈将如下所示：

Stack2ContentPage
Stack2LandingPage

如何使用 react-navigation 版本 5 实现这一点？

我正在创建一个底部选项卡栏，但没有使用内置的react-native-navigation，并且我想禁用左右滑动动画。首先，我尝试使用animationEnabled道具，但它似乎没有做任何事情。我也尝试过使用计时并将持续时间设置为 0，但也没有成功。我究竟做错了什么？

根栈.js

// import react navigation
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// import screens
import Login from '../screens/Login';
import Signup from '../screens/Signup';
import Welcome from '../screens/Welcome';
import AccountScreen from '../screens/AccountScreen';
import NewsScreen from '../screens/NewsScreen';
import SearchScreen from '../screens/SearchScreen';
import TrendingScreen from '../screens/TrendingScreen';
import TabBarComponent from '../components/TabBarComponent';



// Colors
import {Colors} from '../components/styles';
const{brand, darkLight, primary, tertiary } = Colors;

import React, {useState} from 'react';

const Stack = createNativeStackNavigator();



    

const ArrowStack = () …

我有一个应用程序，我可以在其中登录/注册并可以注销/注销，我正在使用react navigation v6相同的应用程序，并且我可以登录，但是当我注销时，它不会立即将我注销，我会到hot restart应用程序，然后我已经注销了，它只是在没有热重启的情况下不会注销我，而且，在注销时，我收到错误/警告：

error:

The action 'NAVIGATE' with payload {"name":"Login"} was not handled by any navigator.
Do you have a screen named 'Login'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.
This is a development-only warning and won't be shown in production.

下面是我正在使用的代码：

上下文文件：

The action 'NAVIGATE' with payload {"name":"Login"} was not handled by any navigator.
Do you have a screen named 'Login'?
If you're trying to navigate …

我在我的 React Native expo 应用程序中使用expo-router，我的文件是

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 (main)\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 _layout.js\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 _foo.js\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 _bar.js\n

layout.js

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 (main)\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 _layout.js\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 _foo.js\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 _bar.js\n

但是，我的 iOS 设备上显示的 2 个选项卡按钮有标题foo和bar而不是Foo和Bar。

设置选项卡按钮名称的正确方法是什么？

另外，有没有办法重新排列选项卡按钮的顺序？例如显示[ Foo | Bar ]而不是[ Bar | Foo ]. 谢谢！

我在反应本机（打字稿）应用程序中有这个功能：

import { LoginProps } from '../types';

export const signOut = async (auth: Auth, nav: LoginProps['navigation'], setUser: any) => {
    try {
        await auth.signOut();
        nav.navigate('Login');
        setUser(null);
    } catch (error) {
        console.log(error);
    }
}

该函数按预期工作，但如果我注释或删除此行：await auth.signOut();，
我收到此错误：The action 'NAVIGATE' with payload {"name":"Login"} was not handled by any navigator.

如果我尝试只导航而不在函数中执行任何其他操作，也会发生同样的情况。
我不明白这两行是如何链接的以及为什么第一行对于第二行的工作是必要的......

我在测试解决这篇文章的方法时遇到了这个问题。

这是我的类型：

export type RootStackParamList = {
    Home: undefined;
    Login: undefined;
    Register: undefined;
    Game: { roomId: string | null };
}

export type NavigationProps<T extends …

createDrawerNavigation（）已移至react-navigation-drawer。有关更多详细信息，请参见https://reactnavigation.org/docs/4.x/drawer-navigator.html