标签: react-navigation-v5

React Navigation v3 具有initialRouteParams属性，用于将初始值传递给this.navigation.props。有没有办法设置初始路由参数以通过React Navigation v5 中的route.params访问？

function MainScreen({route, navigation}) {
    return (
        // how to pass default values to route in here?
        // route.params.userParam ?
        ...
    );
}

<Stack.Navigator>
  {
    isLogin ? <ComponentA /> :  <ComponentB />
  }
</Stack.Navigator>


const ComponentA = () => (
 arrA.map( v => <Stack.Screen name={v.name} component={v.component} />)
)

const ComponentB = () => (
 arrB.map( v => <Stack.Screen name={v.name} component={v.component} />)
)

我想在组件A和组件B中使用一些钩子，所以我必须将它们用作功能组件，请问有什么帮助吗？

源代码

TabScreenStack.js

import { StyleSheet, Text, View, Button } from 'react-native';
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './home';
import DehazeRoundedIcon from '@material-ui/icons/DehazeRounded';
import LoginScreen from './login';
import AboutScreen from './about';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
const Tab = createMaterialBottomTabNavigator();
const LoginStack = createStackNavigator();
const HomeStack = createStackNavigator();
const AboutStack = createStackNavigator();


const HomeStackScreen = ({ navigation }) => (

    <HomeStack.Navigator >
        <HomeStack.Screen name="Home" component={HomeScreen} options={{
            headerLeft: () => {
                return (
             <View style={styles.drawer}> …

我正在使用materialTopTabs，似乎这会在安装后加载导航器中的所有屏幕。我有一个屏幕列表，其中有一个带有 2 个屏幕的选项卡导航器：Posts和Users。这两个屏幕都取决于从List传递的参数。但是，我只能使用此方法将参数传递到屏幕之一：

navigation.navigate('PostsTabNav', {
  params: {
    network: item,
  },
  screen: 'NetworkPosts' //or NetworkUsers
});

我试图通过这样做直接将参数传递给我的导航器：

navigation.navigate('PostsTabNav', {
  network: item
});

第一个选项只允许我传递到一个屏幕。第二个选项允许我像这样访问导航器中的参数：

const PostsTabNav = createMaterialTopTabNavigator();
const PostsMainNav = (props) => {
    const temp = props.route.params.network; //params here

    return (
        <PostsTabNav.Navigator>
            <PostsTabNav.Screen name="NetworkPosts" component={NetworkPostsScreen} />
            <PostsTabNav.Screen name="NetworkUsers" component={NetworkUsersScreen} />
        </PostsTabNav.Navigator>
    );
};

有没有办法传递temp到我的两个屏幕？如果没有，有没有更好的方法来处理这种情况？

这是代码 StackNavigator

const NetworkListStackNav = createStackNavigator();
export const NetworksListNavigator = () => {
    return ( …

我想模拟在我的功能组件中使用的 useNavigation 钩子。任何解决方法如何使用玩笑来模拟它？

import React from 'react';
import { useNavigation } from '@react-navigation/native';
import { TouchableOpacity } from 'react-native';

const MyComponent = () => {
  const { navigate } = useNavigation();

  const navigateToScreen = () => {
    navigate('myScreen', { param1: 'data1', param2: 'data2' })
  }

  return (<TouchableOpacity onPress={navigateToScreen}>
       Go To Screen
     </TouchableOpacity>)
}

如何测试在导航功能中传递的参数？

使用 TypeScript 3.9、React Native、React 导航...

我收到错误：

interface StackParamList
Type 'StackParamList' does not satisfy the constraint 'Record<string, object | undefined>'.
  Index signature is missing in type 'StackParamList'.ts(2344)

在：

const HomeStack = createStackNavigator<StackParamList>()

在：

interface StackParamList
Type 'StackParamList' does not satisfy the constraint 'Record<string, object | undefined>'.
  Index signature is missing in type 'StackParamList'.ts(2344)

我不明白为什么接口不满足类型 'Record<string, object | 未定义>'。

我不明白“索引签名丢失”是什么意思。

你有好主意吗？

谢谢

我想禁用堆栈导航器标题部分的屏幕动画。

我通过在堆栈导航器中定义了一个通用的自定义标头screenOptions。

并具有屏幕转换的默认动画。我想确保动画仅发生在屏幕上，而不发生在我的标题组件上。由于标题将是静态内容。

我也尝试过制作headerModeasscreen和float但那没有帮助。我想看看是否有一个类似于animationEnabled标题组件的属性。

<Stack.Navigator
  screenOptions= {{
    headerMode: 'screen',
    animation: 'fade',
    header: (props) =>
        <Header {...props} />
  }}>
  // Rest of my screens
</Stack.Navigator>

使用 react-navigation 4，我能够从“react-navigation”包中导入和使用 switchNavigator。

import {
  createAppContainer,
  createSwitchNavigator,
  createStackNavigator
} from "react-navigation";

import MainTabNavigator from "./MainTabNavigator";
import LoginScreen from "../screens/LoginScreen";
import AuthLoadingScreen from "../screens/AuthLoadingScreen";

export default createAppContainer(
  createSwitchNavigator(
    {
      App: MainTabNavigator,
      Auth: AuthLoadingScreen,
      Login: createStackNavigator({ Login: LoginScreen })
    },

    {
      initialRouteName: "Auth"
    }
  )
);

使用 react-navigation 5，我在包中看不到 createSwitchNavigator 了。该文档也没有帮助。现在不推荐使用吗？我的用例是在用户登录之前显示登录屏幕，并在用户登录后切换到应用程序。 React-navigation 给出了一个身份验证流程的例子，但是否可以使用 switchNavigator - 这似乎更简单。

我正在使用createMaterialBottomTabNavigator并且我想将参数传递给路由：

return (
   <Tab.Navigator initialRouteName="Home">
      <Tab.Screen name="Home" component={home_customers} />
      <Tab.Screen name="Favorites" component={favorite_vendors} />
      <Tab.Screen name="More" component={settings_screen} />
   </Tab.Navigator>
);

我只能找到一个名为initialParams该属性的属性，我不确定在这种情况下使用它是否正确。所以，我想做的是从上一个屏幕获取参数并将该参数传递给这三个屏幕中的每一个！

更新

好的，我找到了如何获取参数，但我仍然不知道如何将这些参数传递到路由屏幕！

export default function home_customers_bar({ route, navigation }) {
    const current_city_ = route.params.current_user_city_; //here I get the parameter from the previous screen
    
    return (
        <Tab.Navigator initialRouteName="Home">
            <Tab.Screen name="Home" component={home_customers} />
            <Tab.Screen name="Favorites" component={favorite_vendors} />
            <Tab.Screen name="More" component={settings_screen} />
        </Tab.Navigator>
    );
}

我正在像这样设置导航容器的主题

import {
  NavigationContainer,
  DefaultTheme,
  DarkTheme,
} from "@react-navigation/native";

export default function Navigation() {
  const colorScheme = useColorScheme();
  return (
    <NavigationContainer
      linking={LinkingConfiguration}
      theme={colorScheme === "dark" ? DarkTheme : DefaultTheme}
    >
      <RootNavigator />
    </NavigationContainer>
  );
}

我有一个堆栈导航器，在堆栈导航器内我有一个抽屉式导航器，如下所示：

// Root Navigator
export default function RootNavigator() {
  return (
    <Stack.Navigator id="root-navigation-navigator" initialRouteName={initialRouteName}>
      <Stack.Screen
        name="Root"
        component={DrawerNavigator}
        options={{
          headerShown: false,
        }}
      />
      {/* Other Screens */}
    </Stack.Navigator>
  );
}

// Drawer Navigator
export default function DrawerNavigator(props) {
  return (
    <Drawer.Navigator
      initialRouteName="UserSettings"
      drawerContent={(props) => <CustomDrawerContent {...props} …