react-navigation 相关问题

Expo Router React Native setParams() 不在屏幕上错误

我在使用 Expo Router 的 router.setParams() 方法时遇到问题。 我试图按照这里的例子： https://docs.expo.dev/router/reference/search-parameters/#updating-search-parameters...

如果我使用多个 useFocusEffects，为什么我的屏幕组件会渲染两次？

我正在使用两个 useFocusEffect() 挂钩（来自react-navigation-v6）。 当下面代码中显示的屏幕处于焦点时，它会呈现两次，而不是我期望的一次（console.log() ru...

Expo Router - 推送新屏幕时保留屏幕状态

我正在 React Native 中使用 Expo Router。我注意到当我使用 router.back() 时，前一个屏幕没有保持旧状态，它只是重新渲染。 例子： 导出默认 ScreenA = () ...

iOS 部署 ReactNative 项目时遇到的问题

我正在开发一个全新的 iOS/Android 应用程序，我想使用单个代码，所以我决定为我的应用程序使用 ReactNative，并且我想自己构建可执行文件，而不是使用一些...

React 导航：`useLinkProps` 未在浏览器中生成正确的链接

我正在使用react-navigation v6和expo 49。Web的Bundler是webpack。 我需要反应导航方面的帮助。它是围绕如何生成链接的。我创建了一个链接配置，其中有一个配置l...

带有反应导航的Expo SDK 45启动画面

我刚刚升级到 Expo SDK 45，收到一条警告：“expo-app-loading 已被弃用，取而代之的是 expo-splash-screen：使用 SplashScreen.preventAutoHideAsync() 和 SplashScren.hideAsync() 代替......

React 导航自定义底部选项卡图像

我使用 React Navigation v6 创建了自定义底部选项卡导航，我提供图像作为底部导航的图标，如何在我的 CustomTabBar 中提供动态图像，当前...

如何使用 React Navigation 包将 Screen 和 WebView 的后退按钮合并到 React Native 中？

我正在学习 React Native 中的导航，并且不知道如何有条件地使用一个后退按钮。 想要的行为是这样的 - 如果用户在屏幕之间导航，他可以按 Go B...

headerLeft 在reactNavigation V3 中不起作用

我已经检查了以前的答案并尝试了不同的方法，但仍然不起作用。仅当我在屏幕内使用静态导航选项时它才有效 我尝试使用 defaultNavigationOptions 但不行

当我渲染 React Native Vision 相机时，React 导航页面过渡动画未显示

我正在使用 React Navigation 和 React Native Vision Camera 开发移动应用程序。 我正在使用 native-stack 并将动画添加到每个 Stack.Screen 中。 我正在使用 React Navigation 和 React Native Vision Camera 开发移动应用程序。 我正在使用本机堆栈并将动画添加到每个Stack.Screen。 <Stack.Screen ... options={{animation: 'slide_from_right',...}} /> 它们运行良好，直到我将用户从ScanScreen导航回来，其中包含反应本机视觉相机组件。 我的工作流程是Home -> Scan -> Result -> back to Home。 当我导航到ScanScreen时，动画正在工作，但如果我在goBack()中调用ScanScreen，或在popToTop()中调用ResultScreen，动画就会消失，应用程序看起来有点卡住。 这是我的代码ScanScreen const ScanScreen = ({route, navigation}) => { const {locations} = route.params; // permission const {hasPermission, requestPermission} = useCameraPermission(); // if camera page is active const isFocussed = useIsFocused(); const isForeground = useIsForeground(); const isActive = isFocussed && isForeground; // camera torch control const [torch, setTorch] = useState('off'); // get device const device = useCameraDevice('back'); // inititalization const [isCameraInitialized, setIsCameraInitialized] = useState(false); const onInitialized = useCallback(() => { console.log('Camera initialized!'); setIsCameraInitialized(true); }, []); const codeScanner = useCodeScanner({ codeTypes: ['qr', 'ean-13'], onCodeScanned: codes => { onQRCodeScan({codes}); }, }); useFocusEffect( useCallback(() => { if (!hasPermission) { requestPermission(); } return () => { // setIsCameraReady(false); }; }, []), ); {device != null && ( <Camera style={{flex: 1}} device={device} isActive={isActive} onInitialized={onInitialized} codeScanner={codeScanner} torch={torch} /> )} }) 我在想视觉相机是否太重了？或者也许我正在处理错误的生命周期。我还没有在IOS上尝试过。 我尝试在离开页面之前停用相机，但是在我可以之后，transitionStart 没有被触发 goBack() React.useEffect(() => { const unsubscribe = navigation.addListener('transitionStart', (e) => { // Do something }); return unsubscribe; }, [navigation]); 您可以自己处理这个问题Stack.Navigator您不应该在每个屏幕上使用。 喜欢： <Stack.Navigator initialRouteName="Tabs" screenOptions={screenOptions}> <Stack.Screen name={Route.SPECS_FEATURES} component={SpecAndFeatures} options={{headerShown: false, gestureEnabled: false}} /> </Stack.Navigator> 屏幕选项 const screenOptions = { cardStyle: {backgroundColor: colors.background, opacity: 1}, headerShadowVisible: false, headerBackTitleVisible: false, headerTitleAlign: 'center', gestureDirection: 'horizontal', gestureEnabled: false, cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, headerTitleStyle: {color: 'white', justifyContent: 'center'}, transitionSpec: {open: config,close: closeConfig}, }; 我的配置 const config = { animation: 'spring', config: { stiffness: 1000, damping: 100, mass: 3, overshootClamping: false, restDisplacementThreshold: 0.01, restSpeedThreshold: 0.01, }, }; 我的closeConfig： const closeConfig = { animation: 'timing', config: { duration: 400, stiffness: 1000, damping: 500, mass: 100, overshootClamping: false, restDisplacementThreshold: 0.5, restSpeedThreshold: 0.5, }, }; 如果您想更改导航动画样式，您应该在 cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS 中进行更改，它提供了许多您想要的默认动画，您也可以在 config 或 closeConfig 中更新以更改动画样式。 了解更多详情，您可以访问CardStyleInterpolators

React Native 无法读取未定义的属性调度

我在本机反应中遇到此错误 导航器.调度 当 NavigationService.navigate("Dashboard"); 时无法读取未定义的属性分派 我已经从反应导航迁移了代码......

React Native 输入字段在输入字符后失去焦点

每次我在任何输入字段中输入字符时，它都会失去焦点，并且除非我单击返回输入字段，否则我无法继续输入。 这是我的登录表单。我检查了一下以确保

移动到嵌套导航器中的屏幕React Navigation v5

上下文 我看到很多类似的问题，但没有人能有效回答我的问题。 这是我的导航器结构： MainNavigator（模式=“模式”，标题模式=“无”） - TabNaviga...

如何访问NavigatorScreen > Screen组件内的选项？

有什么方法可以访问 Home 组件内的导航器屏幕选项对象吗？ 有什么方法可以访问 options 组件内的导航器屏幕 Home 对象吗？ <Stack.Navigator> <Stack.Screen name="Home" component={Home} options={ { /** some options... */ } } /> <Stack.Screen name="About" component={About} /> </Stack.Navigator> 首页 function Home() { /** Get options object here */ return ( /** some jsx */ ); } 我正在使用反应导航5 我发现的唯一方法是保留您的 ref 的 NavigationContainer，然后使用 containerRef.getCurrentOptions()。 我不喜欢全局引用，但似乎没有办法从钩子中获取选项。我只能找到 navigation.setOptions()，但找不到关于 getOptions() 的信息。 就我而言，containerRef.getCurrentOptions()返回了这个： { "tabBarStyle": [ { "borderTopWidth": 1, "borderTopColor": "#EAECF0", "height": 97.20716112531969, "paddingTop": 9.720716112531969, "paddingBottom": 19.441432225063938 }, false ], "tabBarLabelStyle": { "fontSize": 12, "textAlign": "center" }, "tabBarActiveTintColor": "#28C6C7", "tabBarInactiveTintColor": "#101828", "tabBarLabel": "Treatment", "title": "Current Treatment" } 这就是我在导航器 screenOptions 中定义的内容以及各个 Stack.Screen 选项。 您可以将 navigation.setOptions 用于主屏幕 function Home({ navigation, route }) { React.useLayoutEffect(() => { navigation.setOptions({ headerTitle: getHeaderTitle(route) }); }, [navigation, route]); } 有关更多详细信息，您可以阅读此文档屏幕选项

为什么我的 React 组件中的“消息卖家”按钮没有导航到所需的页面？

我正在开发一个 React 应用程序，其中有一个 PostFooter 组件，负责显示与帖子相关的各种功能，例如喜欢帖子、评论帖子和消息传递...

反应导航打开 openDrawer() 不起作用

这是我的导航代码，我有一个抽屉导航器，其中包含堆栈，我遇到的问题是我无法在堆栈中使用 this.props.navigation.openDrawer() ，导航器。 ..

如何使用 Tab.Navigator screenOptions 更改活动选项卡颜色？

我正在使用 React Native，特别是 React Navigation 中的 createMaterialTopTabNavigator。我希望选项卡能够正常工作，这样当您按下一个选项卡时，它会变成紫色，而其他选项卡则处于非活动状态......

React 导航 - 使用 StackActions 替代 navigation.reset

是否有使用 StackActions 的 navigation.reset() 替代方案？ 我尝试过一些事情，例如： 导航.popToTop() 导航.替换（'主页'） 虽然这带我去我想去的地方......

创建可以从不同屏幕导航到的可重用屏幕序列（例如模式向导）？

我正在尝试使用反应导航来设计可重用的屏幕序列（包含多屏幕、类似向导的流程的模式）。我想从不同的屏幕导航到这个序列，我...

如何在React Native导航中使用modalPresentationStyle .fullscreen

我正在尝试创建我的第一个 React Native 应用程序。我有一个登录屏幕，如果用户想要注册，我想从该屏幕导航到注册屏幕。 为了实现这一目标，我正在考虑开放......