标签: react-navigation-stack

我正在将 RN 项目版本 4 迁移到 5。

切换屏幕时出现白色背景闪烁的问题。在 v4 中，通过cardStyle: { backgroundColor: material.containerBgColor }在StackNavigation选项中设置解决了这个问题。

但是在 v5 中，我无法使用相同的方法修复它：

<Stack.Navigator cardStyle={{ backgroundColor: material.containerBgColor }} ...>

白光又回来了。知道如何修复它吗？谢谢。

更新：导航的结构可能很重要：

const AppTabNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen name="Home" component={Home} />
    <Stack.Screen name="ScreenD" component={ScreenD} />
    <Stack.Screen name="ScreenE" component={ScreenE} />
    <Stack.Screen name="ScreenF" component={ScreenF} />
  </Tab.Navigator>
)
...
  <Stack.Navigator
    ...
    cardStyle={{ backgroundColor: material.containerBgColor }}
  >
    <Stack.Screen name="Home" component={AppTabNavigator} />
    <Stack.Screen name="ScreenA" component={ScreenA} />
    <Stack.Screen name="ScreenB" component={ScreenB} />
    <Stack.Screen name="ScreenC" component={ScreenC} />
  </Stack.Navigator>

从 ScreenD …

useNavigation我正在尝试从 React Navigation 中输入。我希望能够仅传递路线的名称，但除非我也传递该路线的道具，否则我会收到错误。

根据文档，我理解实现应该如下所示：

import { StackNavigationProp } from '@react-navigation/stack';

type StackParamList = {
    Home: { foo: string, onBar: () => void }
    About: AboutProps
}

type NavigationProps = StackNavigationProp<StackParamList>

const MyComponent = () => {
  const navigation = useNavigation<NavigationProps>()

  const handleOnNavigate = () => navigation.navigate('Home')
  //                                                    ^ TypeError!

我在最后一行收到 TypeError 。如果我为该路线添加道具，错误就会消失，但我不必这样做。

navigation.navigate('Home', { foo: 'hello', onBar: () => {} })

查看类型声明navigation.navigate（见下文），这应该不是必需的，因为简单地将路由名称作为唯一参数传递会发生重载。我一定做错了什么，因为这是不被接受的……但是什么、在哪里以及为什么？

这是一个重现 TypeError 的 CodeSandBox。

React 导航 types.d.ts（链接）

navigate<RouteName …

我刚刚安装了 React 导航版本 6，收到以下错误

尝试在空对象引用上调用接口方法 boolean com.swmansion.reanimated.layoutReanimation.NativeMethodsHolder.isLayoutAnimationEnabled()

下面是我的代码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */
import 'react-native-gesture-handler';
import React from 'react';

import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,

} from 'react-native';

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

import Upload from './Screens/Upload';
import Display from './Screens/Display';

const Stack = createStackNavigator()

function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
        name='Screen_A'
        component={Upload}
        >


        </Stack.Screen>
        <Stack.Screen …

以下是我的应用程序导航器的层次结构

？？？appNavigator（底部标签导航器）

• ？？？提要（堆栈导航器）

  • 后详细信息屏幕
  • 页面详细信息屏幕
  • 配置文件详细信息屏幕
  • ...其他屏幕

• ？？？通知（堆栈导航器）

  • 配置文件详细信息屏幕
  • 页面详细信息屏幕
  • 发布详细信息屏幕
  • ...其他屏幕

• ？？？个人资料（堆栈导航器）

  • 配置文件详细信息屏幕
  • 页面详细信息屏幕
  • 发布详细信息屏幕
  • ...其他屏幕

现在的问题是我必须复制所有堆栈中通用的屏幕（ProfileDetail、PostDetail 和 PageDetail），以便在堆栈中访问它们。

对于此用例，是否有更好的解决方案。我应该在哪里放置通用屏幕，以便它们在所有子堆栈中可用，并且我不必在任何地方复制它们。

这是我经历的一个开放的 github 问题，但找不到好的解决方案 Isuue

我正在寻找创建一个堆栈导航器，可以处理两个屏幕之间的动画特定元素。Fluid Transitions看起来像一个我可以使用的库，但它不支持react-navigation5.X。如果有一个包具有用于 react-navigation v5 的此功能，那就太好了。

但是，如果 v5 没有当前包，我想扩展StackNavigator以处理这种功能。我已经能够StackNavigator使用类似于以下内容的内容删除 的默认动画（道具中的transitionbool 在哪里为：optionsStack.Screen

const CustomTransitionStackNavigator = ({
  initialRouteName,
  children,
  screenOptions,
  ...rest
}) => {
  if (descriptors[state.routes[state.index].key].options.transition) {
    return (
      <View style={{ flex: 1 }}>
        {descriptors[state.routes[state.index].key].render()}
      </View>
    );
  }

  return (
    <StackView
      {...rest}
      descriptors={descriptors}
      navigation={navigation}
      state={state}
    />
  );
};

我希望能够使用Context（或其他一些方法）将过渡进度传递给场景的后代以处理动画。有没有办法在 v5 中获得过渡进度？或者这CustomTransitionStackNavigator是否需要管理该状态？谢谢！

undefined 无法@react-navigation/native从App.js以下位置解析模块：在项目中找不到 @react-navigation/native。

如果您确定该模块存在，请尝试以下步骤：

 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
- node_modules\react-native\Libraries\Utilities\HMRClient.js:307:41 in showCompileError
- node_modules\react-native\Libraries\Utilities\HMRClient.js:228:26 in client.on$argument_1
- node_modules\eventemitter3\index.js:181:39 in emit
- node_modules\metro\src\lib\bundle-modules\WebSocketHMRClient.js:80:20 in _ws.onmessage
- node_modules\event-target-shim\dist\event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules\react-native\Libraries\WebSocket\WebSocket.js:232:27 in _eventEmitter.addListener$argument_1
- node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:190:12 in emit
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 …

当我尝试使用时import {createStackNavigator} from @react-navigation/stack，它给了我一个错误

Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider

我试图找到解决方案，但没有任何帮助。

在此处输入图片说明

导航类型定义如下，当我从 例如 导航AOne到时BTwo，控制台id:99 日志props.route.params显示正确的信息。但props.route.params.id抛出类型错误

类型错误：未定义不是对象（正在评估“props.route.params.id”）

    // navigation related imports in all components 
    import {BottomTabScreenProps} from '@react-navigation/bottom-tabs';
    import {CompositeScreenProps, NavigatorScreenParams} from '@react-navigation/core';
    import {StackScreenProps} from '@react-navigation/stack';

    // type defenitions
    export type StackOneParams = {
      AOne:undefined,
      BOne: undefined,
      // some other screens
    };
    export type StackTwoParams = {
      ATwo: undefined;
      BTwo:{id:number};
      // some other screens
    };
    
    export type TabParams = {
      StackOne: NavigatorScreenParams<StackOneParams>;
      StackTwo: NavigatorScreenParams<StackTwoParams>;
    // ... some other stacks each represent a …

我在 Stack Navigator 中有一个 Tab Navigator，我希望将标题标题动态配置为所选选项卡的标题。就像有 3 个选项卡：主页、个人资料、添加项目，我希望标题在主页选项卡中为“主页”，在个人资料选项卡中为“个人资料”。

我尝试在根导航器上使用 onStateChange 并在选项卡导航器上使用 setOptions 但 onStateChange 仅在嵌套导航器中可用，而在嵌套导航器中不可用。

他们无论如何我可以存档吗？

导航器配置是：

const TabNav = (
   <Tab.Navigator>
      <Tab.Screen name='Home' component={HomeScreen}/>
      <Tab.Screen name='Profile' component={ProfileScreen}/>
      <Tab.Screen name='Add Item' component={AddItemScreen}/>
   </Tab.Navigator>
)

<NavigationContainer>
   <Stack.Navigator>
      <Stack.Screen name='Login' component={LoginScreen}/>
      <Stack.Screen name='App' component={TabNav}/>
   </Stack.Navigator>
</NavigationContainer>

我想模拟在我的功能组件中使用的 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>)
}

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