react-navigation 相关问题

React-Navigation：“react/jsx-runtime”。jsx 不是一个函数（未定义）

安装react-navigation并复制他们的示例后，我收到以下错误 _$$_REQUIRE(_dependencyMap[5], "react/jsx-runtime").jsx 不是一个函数（它是未定义的） 不知道...

错误：NSstring 类型的 JSON 值无法转换为 YGValue。您是否忘记了 % 或 pt 后缀

为什么我不能使用下面的 global.App_BottomTabBarHeight 来设置 React Navigation createBottomTabNavigator 中的高度？其中 global.App_BottomTabBarHeight = '8%'。这是在另一个类中定义的。我是

按下时使用 MenuItem 进行导航

我正在使用 UI-Kitten 的顶栏，在其中，我想按下时切换到不同的屏幕： const MenuIcon = (props): IconElement => ( 我正在使用 UI-Kitten 的顶栏，在那里，我想按按时切换到不同的屏幕： const MenuIcon = (props): IconElement => ( <Icon {...props} name='three-bars' /> ); const InfoIcon = (props): IconElement => ( <Icon {...props} name='info' /> ); export const TopNavigator = (): React.ReactElement => { const [menuVisible, setMenuVisible] = React.useState(false); const toggleMenu = (): void => { setMenuVisible(!menuVisible); }; const renderMenuAction = (): React.ReactElement => ( <TopNavigationAction icon={MenuIcon} onPress={toggleMenu} /> ); const themeContext = React.useContext(ThemeContext); const renderRightActions = (): React.ReactElement => ( <> <OverflowMenu anchor={renderMenuAction} visible={menuVisible} onBackdropPress={toggleMenu} > <MenuItem accessoryLeft={InfoIcon} title='About' onPress={() => navigation.navigate('myScreenName')} /> </OverflowMenu> </> ); return ( <Layout style={styles.container} level='1' > <TopNavigation alignment='center' title='App' accessoryRight={renderRightActions} /> </Layout> ); }; 当我现在单击“关于”时，它会显示： Property 'navigation' doesn't exist 我知道我必须使用导航道具做一些事情，但我真的不知道在哪里以及如何做。我想不通。我所尝试的一切都会导致更多的错误和问题。有人可以帮我吗？ 在TopNavigator执行上下文中，没有navigation的定义。我不知道你是否遵守react-navigation的等级规则。但如果你这样做了，你会在 useNavigation 函数中调用 TopNavigator 钩子，如下所示： export const TopNavigator = (): React.ReactElement => { const navigation = useNavigation(); 那么您就不应该看到该错误。

使用react-native-reanimated反应导航崩溃

将react-native-reanimated库集成到我的React Native项目中后，我遇到了导航设置问题。在集成react-native-reanimated之前，我的导航系统......

如何在React Navigation 6中隐藏特定屏幕中的tabBar？

如何在react-navigation 6中隐藏特定屏幕中的选项卡栏...无需更改导航结构，因为它是此处文档中唯一可用的选项

React 导航 v6 在查看嵌套屏幕之前不会导航到该屏幕

在react-native（Expo托管和react-navigation v6）应用程序中，我的导航结构如下： 当我想使用 navigation.navigate('ListPag...

使用createStackNavigator、React Native实现标题的透明背景

我使用 CRNA 创建了一个使用 React-Navigation 的项目。在其中一个屏幕中，我有一个覆盖整个屏幕的背景图像，我想包括标题。 就像这张图片： 我应该吗

是否可以禁用“Drawer.Screen”，使其无法被单击（React Native）？

在此输入图像描述 是否可以禁用“调查表”，使其无法被点击？ 我在 React Native 应用程序中使用 React Navigation 进行抽屉导航。我有一个 Drawer.Screen com...

错误：“找不到导航对象。您的组件在 NavigationContainer 内吗？”在 React Native 中使用 useNavigation

我正在尝试创建类似登录屏幕的东西。但如果用户有一个活跃的令牌。他们不必重新进行身份验证。 `` 从 'react' 导入 React, { useEffect }; 导入 { 导航容器...

反应本机方向问题不起作用

我正在开发应用程序，方向不起作用 起初我的React项目是版本63.3 我将以下命令添加到 android manifest.xmln 我正在开发应用程序，方向不起作用 起初我的React项目是版本63.3 我将以下命令添加到 android manifest.xmln <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:screenOrientation="portrait" > 然后我在App.js中使用了react-native-orientation-locker import Orientation from 'react-native-orientation-locker' Orientation.lockToPortrait() 但是什么也没发生 尝试什么 我尝试更改 app.json 并添加以下命令 "orientation":"portrait" 然后我像这样使用useeEfect useEffect(() => { Orientation.lockToPortrait() }, []) 然后我尝试更改 Android 清单 tools:ignore="LockedOrientationActivity" 然后将 android:screenOrientation="portrait" 添加到 androidmanifest.xml 中的应用程序标签中 并尝试将其添加到我使用 navigationContainer 的屏幕中，并使用 useEffect 和不使用它来锁定它，但仍然是同样的问题 毕竟更新RN到版本64.2但出现同样的问题 在这种情况下，我锁定横向以检查代码是否正确，应用程序加载横向，加载应用程序后变为纵向 有些东西导致了这个问题，我不知道如何找到它 当我在主屏幕或详细信息屏幕中使用 orientation.lockToPortrait() 时，它会遇到一些问题，但可以工作 我错过了什么吗？？ 这对我有用。 useEffect(() => { setTimeout(() => { Orientation.lockToLandscape(); }, 1000); }, []); 也有这样的经历........

React 原生屏幕导航很慢

我使用带有功能组件的反应导航，当我从一个屏幕移动到另一个屏幕时，我面临着一个问题。需要 1-2 秒。用户能够观察到某些东西...

React Navigation v6 - 嵌套选项卡堆栈导航和返回

我的导航结构设置如下： 选项卡1 屏幕 1（初始页） 屏幕2 选项卡2 屏幕 3（初始页） 屏幕4 设想： 在某些情况下，屏幕 1 必须直接导航...

React Navigation 在条件之间共享屏幕

{deliveryOutlet.deliveryAvailable === false ？ <Stack.Navigator> {deliveryOutlet.deliveryAvailable === false ? <Stack.Group> <Stack.Screen name="NotDeliverable" component={NotDeliverable} options={{ ...baseScreenOptions, }} /> <Stack.Screen name="SelectAddress" component={SelectAddress} options={{ ...baseScreenOptions, }} /> </Stack.Group> : <Stack.Group> <Stack.Screen name="BottomNavigator" component={BottomNavigator} options={{ ...baseScreenOptions, }} />} <Stack.Screen name="OrderDetails" component={OrderDetails} options={{ ...baseScreenOptions, }} /> <Stack.Screen name="SelectAddress" component={SelectAddress} options={{ ...baseScreenOptions, }} /> </Stack.Group> </Stack.Navigator> 我希望能够转发到 SelectAddress，即使 devlieryAvailable 是 true 或 false，这样做会给我一个重复的屏幕名称错误，从任何组中删除会使其在这种情况下不可用 您可以按照React-Naivgation文档中编写的有关在身份验证状态更改时删除共享屏幕的指南进行操作。 您可以从2个Stack组中提取公共页面SelectAddress并将其放在<Stack.Navigator>下。 <Stack.Navigator> {deliveryOutlet.deliveryAvailable === false ? <> <Stack.Screen name="NotDeliverable" component={NotDeliverable} options={{ ...baseScreenOptions, }} /> </> : <> <Stack.Screen name="BottomNavigator" component={BottomNavigator} options={{ ...baseScreenOptions, }} /> <Stack.Screen name="OrderDetails" component={OrderDetails} options={{ ...baseScreenOptions, }} /> </> } <Stack.Screen name="SelectAddress" component={SelectAddress} options={{ ...baseScreenOptions, }} /> </Stack.Navigator>

导航需要一些时间才能转到主屏幕

我正在尝试导航到用户名字已经存在的主屏幕，否则停留在这个入门屏幕上，但问题是即使名字存在，也需要 1-2 秒才能导航到主页

react-native-screens：compileDebugKotlin 失败

我尝试在我的 RN 项目中使用 React Navigation，但是当我安装react-native-screens（这是它工作所需的包）时，我无法再次构建该项目。 我得到的错误是

导航到另一个堆栈底部导航react-native-paper

不知道如何使用react-native-paper和react-navigation导航到另一个堆栈 函数 RootStack(): JSX.Element { 返回 （ 不知道如何使用react-native-paper和react-navigation导航到另一个堆栈 function RootStack(): JSX.Element { return ( <NavigationContainer> <Stack.Navigator screenOptions={{ presentation: 'transparentModal', headerShown: false }}> <Stack.Screen name={'BottomStack'} component={BottomStack} /> </Stack.Navigator> </NavigationContainer> ) } 带有react-native-paper的BottomStack import { BottomNavigation, Text } from 'react-native-paper' const BottomStack = (): JSX.Element => { const [index, setIndex] = useState(0) const [routes] = useState([ { key: 'home', title: 'Home', focusedIcon: 'home', unfocusedIcon: 'heart-outline' }, { key: 'jobs', title: 'Jobs', focusedIcon: 'album' } ]) const renderScene = BottomNavigation.SceneMap({ home: HomeStack, jobs: JobsStack }) return ( <BottomNavigation navigationState={{ index, routes }} onIndexChange={setIndex} renderScene={renderScene} /> ) } HomeStack - JobsStack 类似 import { createNativeStackNavigator } from '@react-navigation/native-stack' const Stack = createNativeStackNavigator() function HomeStack(): JSX.Element { return ( <Stack.Navigator initialRouteName={Routes.HOME}> <Stack.Screen name={'Home'} component={Home} /> </Stack.Navigator> ) } 当我选择“作业”选项卡时，出现此错误： 如何解决？ 我认为 React Paper 的 BottomNavigation 有问题。没有深入研究它，但它可能有一个内部NavigationContainer，这可能会导致问题。 本文对嵌套导航器有帮助： https://reactnavigation.org/docs/nesting-navigators#nesting-multiple-navigators const Tab = createMaterialBottomTabNavigator(); const Stack = createStackNavigator(); const BottomNav = (): JSX.Element => { return ( <Tab.Navigator> <Tab.Screen name="Profile" component={Profile} /> <Tab.Screen name="Settings" component={Settings} /> </Tab.Navigator> ); }; const BottomStack = (): JSX.Element => { return ( <NavigationContainer> <Stack.Navigator screenOptions={{ presentation: 'transparentModal', headerShown: false, }}> <Stack.Screen name={'BottomNavigation'} options={{title: 'BottomNavigation'}} component={BottomNav} /> </Stack.Navigator> </NavigationContainer> ); }; function Home(): JSX.Element { return ( <Stack.Navigator initialRouteName={'home'}> <Stack.Screen name={'Home'} component={Home} /> </Stack.Navigator> ); } function Jobs(): JSX.Element { return ( <Stack.Navigator initialRouteName={'jobs'}> <Stack.Screen name={'Jobs'} component={Jobs} /> </Stack.Navigator> ); } function App() { return <BottomStack />; } 我将其替换为 Tab 约定，并且能够正常构建。 我按照本指南解决了这个问题：BottomNavigation 您似乎有两个嵌套的导航器：Stack.navigator内部BottomNavigation。您必须只有一个顶级导航器（一个主屏幕，您可以从该主屏幕导航到所有其他屏幕）。 要解决此问题，您可以将 Stack.Navigator 从 HomeStack 和 JobsStack 全部移至 BottomStack。方法如下： const Stack = createNativeStackNavigator() const BottomStack = (): JSX.Element => { const [index, setIndex] = useState(0) const [routes] = useState([ { key: 'home', title: 'Home', focusedIcon: 'home', unfocusedIcon: 'heart-outline' }, { key: 'jobs', title: 'Jobs', focusedIcon: 'album' } ]) const renderScene = BottomNavigation.SceneMap({ home: Home, jobs: Jobs }) return ( <NavigationContainer> <Stack.Navigator screenOptions={{ presentation: 'transparentModal', headerShown: false }}> <Stack.Screen name={'BottomNavigation'} options={{ title: 'BottomNavigation' }}> {() => ( <BottomNavigation navigationState={{ index, routes }} onIndexChange={setIndex} renderScene={renderScene} /> )} </Stack.Screen> </Stack.Navigator> </NavigationContainer> ) } function Home(): JSX.Element { return ( <Stack.Navigator initialRouteName={Routes.HOME}> <Stack.Screen name={'Home'} component={HomeScreen} /> </Stack.Navigator> ) } function Jobs(): JSX.Element { return ( <Stack.Navigator initialRouteName={Routes.JOBS}> <Stack.Screen name={'Jobs'} component={JobsScreen} /> </Stack.Navigator> ) }

React Navigation 中的 navigation.navigate() 和 <Link /> 有什么区别？

我也在我的项目中使用react-native-web。 navigation.navigate 似乎在网络上运行良好。为什么我需要或者在什么情况下我应该使用？

如何删除材质底部选项卡导航器中焦点后面的白色椭圆形

使用@react-navigation/material-bottom-tabs 并遵循此文档 我想知道如何删除活动选项卡图标后面的这个奇怪的白色圆形？ 已经2个小时了，我正在尝试一切。我失踪了

在 React 中导航到新页面而不丢失当前页面上的数据

我对此进行了一些挖掘，并且还查询了chat-gpt（笑），但我似乎找不到任何解决该问题的资源。我想做的很简单：在页面 A 上，我加载一个列表...

导航到 React 中的新页面，而不丢失当前 [agwe

我对此进行了一些挖掘，并且还查询了chat-gpt（笑），但我似乎找不到任何解决该问题的资源。我想做的很简单：在页面 A 上，我加载一个列表...