将此标记用于与React Native Navigation库相关的问题,该库为React Native应用程序提供完整的本机导航解决方案。
react-native-navigation 是否完全在主线程上工作? JS线程被阻塞了还能用吗
目前我正在开发一个应用程序,由于JS线程长时间阻塞,该应用程序执行大量后台任务。现在我正在使用react-navigation/native-stack和react-navigation/bot...
React Native Stack.Navigator 不适用于 Android
我在 Android 上遇到 Stack.Navigator 问题。它只是由于某种奇怪的原因不起作用。 有简单的代码: 从“反应”导入反应; 从'@react-navig导入{createNativeStackNavigator}...
导出默认函数 App() { 异步函数 getStore(){ 尝试 { const value = wait AsyncStorage.getItem('my-auth'); 如果(值!== null){ console.log('他',值)
如何使用 React Navigation 隐藏 React Native 中特定屏幕上的底部标签栏?
我正在开发一个使用 React Navigation 进行导航的 React Native 应用程序。我设置了一个底部选项卡导航器,用于在我的应用程序中的不同屏幕之间导航。但是,我遇到了一个问题...
我目前正在关注 React Navigation 中的本文教程,使用其包的以下版本: "@react-navigation/bottom-tabs": "^6.5.20", “@react-navigation/
TurboModuleRegistry.getEnforcing(...) 反应原生错误
每当我尝试使用抽屉导航时都会出现此错误 不变违规:TurboModuleRegistry.getEnforcing(...):找不到“NativeReanimated”。通过此验证模块...
警告需要循环:src\Navigation\StackNavigation.js -> src\Navigation\TabsNavigation.js -> src\Navigation\StackNavigation.js允许循环,但可能会导致未初始化的值...
基于 @react-navigation/native 的 Expo Snack 应用程序可以在其 Web 变体上运行,但在 Android 和 iOS 变体上启动时会崩溃
我一直在尝试在 Expo 的 Snack Web 界面上编写 React Native 应用程序。 这是我一直在使用的代码 [2]。 它在 Web 版本上运行流畅,但当我选择 Android 或 iOS 版本时...
我正在尝试从标题按钮打开模式视图。我使用 React Navigation v6 (https://reactnavigation.org/docs/modal/) 作为指南。 我遇到的错误似乎无法解决是: 错误...
我在我的应用程序中使用了 MainBottomTabNavigation 和 StackNavigation。这是我的导航布局 主底部选项卡导航 仪表板屏幕 屏幕 1(堆栈导航) 屏幕 A(初始页) 科学...
使用抽屉导航时出现错误-toggleDrawer() 不是函数错误
我正在创建一个反应本机应用程序,其中我有一个带有菜单图标的组件应用程序标题,当我们按下抽屉时应该打开,但它给出错误 - 错误类型错误:导航...
输入 RNavigation 的正确方法是什么,目前我正在应用程序上执行此操作 导出类型 DrawerNavigatorType = { 商店:未知; ImagesStudio: { 图片: string[] }; // }; 常量抽屉 =
navigation.navigate(screenName) 在 React Native 中不起作用
App.js 从 'react' 导入 React, { Component }; 从'react-native'导入{查看}; 从 './app/components/Navigation/Route' 导入路线; 从“react-native-flash-messag...导入 FlashMessage...
这是组件的代码 这是组件的代码 <NavigationContainer> <Header deviceUid={deviceUid} /> <Drawer.Navigator drawerContent={props => <MotionMenu {...props} />} screenOptions={{ drawerPosition: 'right', drawerType: 'front', swipeEnabled: false, drawerStyle: { width: 320, }, drawerContentContainerStyle: { alignItems: 'center', alignContent: 'center', height: '100%', }, headerShown: false, detachInactiveScreens: false, }}> <Drawer.Screen screenOptions={{ headerShown: false, unmountOnBlur: false, }} name="App" component={TabNavigation} /> </Drawer.Navigator> </NavigationContainer> 我尝试了“drawerType:'permanent'”,但这只是将视图和抽屉彼此对齐 尝试此示例并相应地修改您的代码和导航配置: import * as React from 'react'; import { createDrawerNavigator, createStackNavigator } from '@react-navigation/drawer'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { NavigationContainer } from '@react-navigation/native'; // Sample screens (replace with your actual screens) function HomeScreen({ navigation }) { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> <Button title="Go to Settings" onPress={() => navigation.navigate('Settings')} /> </View> ); } function SettingsScreen() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Settings Screen</Text> </View> ); } function ProfileScreen() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Profile Screen</Text> </View> ); } function NotificationsScreen() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Notifications Screen</Text> </View> ); } // Create the tab navigator const Tab = createBottomTabNavigator(); const TabNavigator = () => { return ( <Tab.Navigator> <Tab.Screen name="Home" component={HomeScreen} /> <Tab.Screen name="Notifications" component={NotificationsScreen} /> </Tab.Navigator> ); }; // Create the stack navigator const Stack = createStackNavigator(); const StackNavigator = () => { return ( <Stack.Navigator> <Stack.Screen name="Tab" component={TabNavigator} /> <Stack.Screen name="Settings" component={SettingsScreen} /> </Stack.Navigator> ); }; // Create the drawer navigator const Drawer = createDrawerNavigator(); const DrawerNavigator = () => { return ( <Drawer.Navigator> <Drawer.Screen name="Home" component={StackNavigator} /> <Drawer.Screen name="Profile" component={ProfileScreen} /> </Drawer.Navigator> ); }; export default function App() { return ( <NavigationContainer> <DrawerNavigator /> </NavigationContainer> ); } 希望对您有帮助。
React Native 如何在底部选项卡导航器上方显示元素
我试图在底部选项卡导航器上方显示一个媒体播放器,就像在 Spotify 应用程序中一样。 它应该在所有屏幕(底部选项卡)上保持相同的状态。 有什么建议或方法
我正在使用 Expo 49 跨本机和网络进行构建。对于网络版本,我需要添加 /robots.txt 路由和其他类似路径。 在我的 /app 目录中,我尝试添加转义路径以确保它
我有一个屏幕,可以获取存储在 useState 中的 isFavourite 数据。屏幕有两个按钮,其中之一是“喜欢”/“收藏”按钮。我正在尝试更新“喜欢”/“最喜欢”按钮的颜色
当我尝试执行“yarn add react-navigation/bottom-tabs”时,终端向我显示错误: 错误 命令失败。 退出代码:128 命令:git 参数: ls-remote --tags --heads ssh://git@github.com...
检查屏幕组件是否以模态方式呈现或者位于 React Native 中的 TabNavigator 中
使用React Native和react-native-navigation我按照以下方式设置了导航; const HomeLayout = () => { 返回 ( 使用 React Native 和 react-native-navigation 我按照以下方式设置了导航; const HomeLayout = () => { return ( <HomeStack.Navigator> <HomeStack.Screen name="Home" component={HomeScreen} /> <HomeStack.Screen name="Search" component={SearchScreen} options={{ presentation: "fullScreenModal", }} /> </HomeStack.Navigator> ); }; const TabLayout = () => { return ( <Tabs.Navigator> <Tabs.Screen name="HomeLayout" component={HomeLayout} /> <Tabs.Screen name="Search" component={SearchScreen} /> </Tabs.Navigator> ); }; 我想检查我的 SearchScreen 是否以模态方式呈现在我的 HomeLayout 中,或者它在我的选项卡导航器中,根据这一点,我需要进行一些 UI 自定义。 我觉得最简单的方法是将模态的初始参数添加为 true 或 false,而不是检查父导航器。在此基础上更改 UI。 <Tabs.Screen name="Search" component={SearchScreen} initialParams={{ modal: false }} options={{ tabBarIcon: ({ focused, color }) => ( <MaterialCommunityIcons name={focused ? "text-box-search" : "text-box-search-outline"} size={25} color={color} /> ), }} />
抽屉导航导致我的应用程序无法加载重新启动的依赖问题(React-Native 0.69.12)
最初我的应用程序加载良好,但我无法显示抽屉导航。我在网上搜索了一些解决方案,要求我在 /android/build.gradle 和 /android/app 中添加一些条目...