一个易于使用的导航解决方案，可用于React和React Native项目https://reactnavigation.org
我想要实现的是这样的，所以下面有一个底部标签导航器，下面，我想显示我的自定义视图。有什么办法可以实现吗？底部Tab代码const Tabs = ...
我正在尝试使用StackNavigator，并且希望在其他屏幕上使用相同的导航。我的配置：EXPO版本：3.0.10“ react-navigation”：“ ^ 4.3.6”，“ react-navigation-stack”：“ ^ 2.3.10” ...
[当我尝试在堆栈导航器中使用选项卡导航器时，该选项卡导航器不可见。除了当我在标签导航器上方添加文本时。这是我带有堆栈导航器的App.js。 ...
使用React Navigation，有没有一种方法可以从外部链接到Navigator中的特定路径/屏幕？例如，要实现一个全局页脚，如下所示： [[] 我认为refs在这里可以工作。如果要在声明的同一级别上使用Navigator，则可以使用react的refs并将props传递给MyFooter。请参阅官方文档中的example。 const AppNavigator = StackNavigator(SomeAppRouteConfigs); class App extends React.Component { someFunction = () => { // call navigate for AppNavigator here: this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName, params }); } render() { return ( <View> <AppNavigator ref={nav => { this.navigator = nav; }} /> <MyFooter someFunction={this.someFunction} /> </View> ); } } 转到此链接：https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html 反应导航版本：5.x 有时您需要从无法访问navigation道具的地方（例如Redux中间件）触发导航操作。在这种情况下，您可以从导航容器中分派导航操作。 [如果您正在寻找一种无需从navigation属性向下传递即可从组件内部导航的方法，请参阅useNavigation。 您可以通过ref访问根导航对象，并将其传递给RootNavigation，稍后我们将使用它进行导航。 // App.js import { NavigationContainer } from '@react-navigation/native'; import { navigationRef } from './RootNavigation'; export default function App() { return ( <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer> ); } 下一步，我们定义RootNavigation，这是一个简单的模块，其功能可以调度用户定义的导航操作。 // RootNavigation.js import * as React from 'react'; export const navigationRef = React.createRef(); export function navigate(name, params) { navigationRef.current?.navigate(name, params); } // add other navigation functions that you need and export them 然后，在您的任何JavaScript模块中，只需导入RootNavigation并调用从中导出的函数。您可以在React组件之外使用这种方法，实际上，从它们内部使用它也一样有效。 // any js module import * as RootNavigation from './path/to/RootNavigation.js'; // ... RootNavigation.navigate('ChatScreen', { userName: 'Lucy' }); [C0以外，您还可以添加其他导航操作： navigate 请注意，需要渲染堆栈导航器来处理此操作。您可能需要检查import { StackActions } from '@react-navigation/native'; export function push(...args) { navigationRef.current?.dispatch(StackActions.push(...args)); } 以获得更多详细信息。 编写测试时，您可以模拟导航功能，并断言是否使用正确的参数调用了正确的功能。 处理初始化 使用此模式时，您需要记住一些事情，以避免应用程序崩溃。 仅在导航容器渲染后才设置参考 需要呈现导航器才能处理操作 [如果您尝试在不渲染导航器的情况下进行导航，或者在导航器完成安装之前进行导航，那么如果不加以处理，它将抛出您的应用程序并使其崩溃。因此，您需要添加其他检查来决定在安装应用之前要执行的操作。 [例如，考虑以下情形，您在应用程序中的某个位置有一个屏幕，并且该屏幕在docs for nesting / useEffect上调度了一个redux操作。您正在中间件中监听此操作，并在获得该操作时尝试执行导航。这将引发错误，因为此时父导航器尚未完成安装。父母的componentDidMount / useEffect始终称为 之后 子女的componentDidMount / useEffect。 为了避免这种情况，您可以设置一个引用来告诉您您的应用已完成安装，并在执行任何导航之前检查该引用。为此，我们可以在根组件中使用componentDidMount： useEffect 也从我们的// App.js import { NavigationContainer } from '@react-navigation/native'; import { navigationRef, isMountedRef } from './RootNavigation'; export default function App() { React.useEffect(() => { isMountedRef.current = true; return () => (isMountedRef.current = false); }, []); return ( <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer> ); } 导出此引用： RootNavigation
如何在React Navigation 5中将父函数传递到子屏幕？
最近，我开始使用React Native 0.61.5和React Navigation5.x。现在，我需要将父函数传递给子屏幕。例如，我想通过在...
我如何在React Navigation 5.x中创建透明背景？
我更改了背景色以使其更加明显。我希望红色容器变得透明。有什么办法可以做到这一点？我正在使用react-navigation 5，并创建了一个自定义底部...
React Navigation：将参数传递到路线：TyperError
我在使用ListItems（react-native-element）和Flatlist构建的“ NerdList”屏幕上有一个配置文件列表。当您从列表中单击一个配置文件时，该应用程序应导航到“配置文件” ...
无法从“ App.js”解析“ @ react-navigation / native”-React Native +如何解决？
未定义无法从App.js解析模块@ react-navigation / native：在项目中找不到@ react-navigation / native。如果确定模块存在，请尝试以下步骤：1.清除...
带有嵌套BottomTabNavigator的StackNavigator的goBack
我正在React Native 0.61.x中使用React Navigation5.x。目标是使导航的goBack功能像Android的默认后退按钮一样工作。在下面的示例中，用户降落到Profile ...
React Native-如何使用React Navigation 5将参数/道具发送到BottomTabNavigator？
我正在使用React Native创建一个应用程序，我需要将参数从一个屏幕发送到选项卡导航器的所有屏幕。屏幕摘要：登录主页个人资料（Tab）设置（Tab）我需要发送...
React-native-splashscreen and navigation
我想使用react-native初始画面创建没有白屏问题的初始画面，然后我要检查导航。假设我有3个屏幕Splash，Login和Home。如果...
我想从可变数组动态添加屏幕。这有效：但是不起作用：它说：错误：找不到导航器的任何屏幕。您是否定义了任何屏幕作为它的...
如何更改createMaterialBottomTabNavigator标签样式（react-native）？
createMaterialBottomTabNavigator是在react-native上添加bottomTabNavigation的一个非常不错的解决方案，但是我还没有找到样式标签的方法，这有可能吗？
React-Navigation：TabNavigation是否也可以使用带有react-native屏幕的性能优化？
我退出了，听说在React-Navigation中使用本机导航的可能性。但是，在各自的博客文章中，仅提及本机Stack-Navigations。我们正在使用...
我有一个包含media_id的对象，该对象具有某种链接，该链接正在导航到我的音频屏幕页面，第二个media_id包含一个要转到视频屏幕页面的字符串。现在我该如何...
我如何强制TabBar在所有App屏幕上显示react-navigation v5？
我正在尝试在应用程序的每个屏幕上显示底部TabBar，但我仍无法找到在RN V5中执行此操作的方法，所以当我尝试使用tabBarVisible这样的 >
react-native createBottomTabNavigator在Android上显示怪异的标签栏
我正在使用react-navigation createBottomTabNavigator创建底部标签导航。选项卡栏在iOS上显示正常，但在Android上显示如下：我不确定是什么原因导致...
已升级到React Native 0.62.0，得到警告信号-“不再需要在Animated组件的ref上调用`getNode（）`
[我只是将我的React本机应用程序升级到0.62.0，现在我的应用程序不断收到此警告信号ReactNativeFiberHostComponent：不再在Animated组件的引用上调用`getNode（）`...
人。我现在遇到一个问题，该问题将参数传递给单个项目屏幕。问题是我正在尝试使用传递的ID来在提取时使用它。我检查了文档，它有...
无法在React Navigation Stack.Navigator中调用元素道具
我正在将Redux使用React-Navigation v5。我想打电话给我的注销动作创建者，以从headerRight触发注销功能。但是，我只能从Home元素和...