标签: react-navigation

当我从注册屏幕导航到主屏幕时，出现以下错误。我在 React Native 中使用了嵌套导航。这是我的 app.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import  {createDrawerNavigator}  from '@react-navigation/drawer';
import Profile from './src/components/Profile';
import SignUp from './src/components/SignUp';
import LoginScreen from './src/screens/LoginScreen'
import ViewAllBooks from './src/screens/ViewAllBooks'
import Home from './src/screens/Home'




const Stack = createStackNavigator();
//  for drawer navigation
const Drawer = createDrawerNavigator();
function Root() {
  return (

      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} />
        
      </Drawer.Navigator>

  );
}
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="signUp"> …

我正在使用嵌套在抽屉导航器中的堆栈导航器，用于使用反应导航 6 的反应本机应用程序。我仅显示堆栈导航器的标题。我想在标题的最左侧放置一个汉堡菜单按钮，但我也希望显示默认的堆栈导航后退按钮。

我在文档中找到了 headerBackVisible 设置，但找不到任何人使用它的示例，所以我不确定我是否正确使用它。我试图在屏幕选项中将其作为 headerBackVisible: true 传递。无论我做什么，如果我在 headerLeft 中放置其他内容，我都无法显示标题后退按钮。

有人对如何将某些内容放在标题后退按钮左侧有任何建议或示例吗？

我有一个react-native-paper TextInput，当我导航到屏幕时（使用react-native-navigation），我想自动聚焦它。我尝试过autoFocus={true}在 TextInput 上进行设置，但没有成功。

在另一次尝试中，我尝试通过监听屏幕上的“焦点”事件来手动聚焦它，但这仅在我第一次打开屏幕时聚焦。有什么办法让它可靠地工作吗？

export default function NewAccountScreen({ navigation }) {
  const [name, setName] = useState('');

  const textInputRef = createRef();

  // This isn't working, neither is autoFocus...
  const focusOnInput = () => {
    textInputRef.current?.focus();
  }

  navigation.addListener("focus", focusOnInput);

  return (
    <View>
      <TextInput ref={textInputRef} label="Account name" value={name} onChangeText={setName}/>
    </View>
  )
}

我使用 React-Navigation 深度链接从 Url 获取参数，但我想将这些参数传递给一个对象。现在我这样做：

prefixes: [Linking.makeUrl('/'), 'https://test.app', 'https://*.test.app'],
  config: {
    screens: {
      App: {
        screens: {
          Chat: {
            path: 'chat/:firstName/:lastName/:birthdate',
            parse: {
              firstName: (firstName: string) => decodeURIComponent(firstName),
              lastName: (lastName: string) => decodeURIComponent(lastName),
              birthdate: (birthdate: string) => decodeURIComponent(birthdate),
            },
          },

这是结果：

 const { firstName, lastName, birthdate} = route.params

我需要的是一个带有名字、姓氏、出生日期的对象：

const { userObject } = route.params

我正在开发一个 React 应用程序，我尝试使用 onSubmit 函数从登录表单导航到应用程序的主屏幕。这是我到目前为止所拥有的。在我的 formik 表单中，我尝试在提交表单时传递电子邮件值。之后，用户被路由到“/dashboard”并最终进入“/dashboard/app”，我试图在控制台中获取记录的电子邮件值。我尝试记录route.params和route.email，但这给出了未定义或错误。

版本：

"dependencies": {
  "react-native": "0.63.4",
  "@react-navigation/bottom-tabs": "^5.11.2",
  "@react-navigation/native": "^5.8.10",
  "@react-navigation/stack": "^5.12.8",
}

测试网站链接test://info_register?token=1111成功，我可以看到route.params包含令牌

但是当我进入选项卡屏幕并尝试使用时test://setting_register?token=1111，应用程序只是打开它不会导航到SettingScreen并且route.params未定义

我参考官方文档https://reactnavigation.org/docs/5.x/configuring-links

我的 Tabs 深度链接有什么问题？

这是我的代码：

索引.js

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';

import LoginStack from './LoginStack';

import Linking from './Linking';

const AppContainer = () => {
  return (
    <NavigationContainer linking={Linking}>
      <LoginStack />
    </NavigationContainer>
  );
};

export default AppContainer;

链接.js

const config = {
  screens: {
    // set config for App init …

我正在开发一个简单的应用程序，现在添加了抽屉导航，但我遇到了一个奇怪的问题，抽屉在从抽屉内容导航到屏幕后再次打开。

PlayerZone 是一个 BottomTabNavigation，包含个人资料和其他屏幕。我尝试在导航到屏幕之前和之后调度关闭抽屉操作，我也尝试过，requestAnimationFrame但没有任何帮助。

看起来怎么样

抽屉屏风：

<Animated.View style={[styles.stack, style]}>
  <Stack.Navigator
    screenOptions={{
      header: () => null,
    }}>
    <Stack.Screen name="PlayerZone" component={PlayerZone} />
  </Stack.Navigator>
  <GameBottomNavigation />
</Animated.View>

抽屉：

<DrawerItem
  label="Profile"
  style={styles.item}
  labelStyle={styles.itemLabel}
  onPress={() => {
    props.navigation.navigate('PlayerZone', {
      screen: 'Profile',
      id: null,
    });
  }}
/>
<DrawerItem
  label="Items"
  style={styles.item}
  labelStyle={styles.itemLabel}
  onPress={() => {
    props.navigation.navigate('PlayerZone', {
      screen: 'Profile',
      id: 'some-id',
    });
  }}
/>

玩家专区：

<Tab.Navigator
  initialRouteName="Profile"
  screenOptions={{
    header: () => null,
  }}>
  <Tab.Screen name="Profile" component={Profile} />
  {!peeking && <Tab.Screen name="Items" component={Items} />}
</Tab.Navigator>

项目： …

抽屉导航位置右侧会产生奇怪的行为。 这是当位置设置为右侧时抽屉的行为

我不确定它为什么会出现这种行为，因为它应该像默认的左侧一样工作。这是我的代码

<NavigationContainer>
  <Drawer.Navigator screenOptions={{drawerPosition: 'right'}}>
     <Drawer.Screen name="Test" component={Test} />
  </Drawer.Navigator>
</NavigationContainer>

环境

"@react-native-community/datetimepicker": "^5.1.0",
"@react-navigation/drawer": "^6.3.1",
"@react-navigation/native": "^6.0.8",
"@react-navigation/native-stack": "^6.5.0",
"moment": "^2.29.1",
"react": "17.0.2",
"react-native": "0.67.2",
"react-native-bootsplash": "^4.1.3",
"react-native-dropdown-picker": "^5.3.0",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": "^2.3.1",
"react-native-reanimated": "^2.4.1",
"react-native-safe-area-context": "^3.4.0",
"react-native-screens": "^3.11.1",
"react-native-svg": "^12.1.1",
"react-native-svg-transformer": "^1.0.0",
"react-native-vector-icons": "^9.1.0"

请帮助我。谢谢

使用 React Navigation 6，在文档中，他们建议您使用组来最小化嵌套导航器。

但是，我不确定如何在本示例中执行此操作，在选项卡导航器中使用嵌套堆栈：

import * as React from 'react';
import { View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function FeedScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />
    </View>
  );
}

function ProfileScreen() {
  return <View />;
}

function SettingsScreen() {
  return <View />;
}

const …

我在 Mac OS 12 上并尝试构建 IOS 应用程序，但由于某种原因，错误： Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.似乎无论我做什么都不会消失。这是每当我重新加载 Metro 时的 Metro 输出：

这是我的代码：

import React, { useState } from 'react';
import { Text, View, Image, StyleSheet, StatusBar, ScrollView } from 'react-native';

import fetch from 'node-fetch';

import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import Main from './pages/main';

const Stack = createNativeStackNavigator();

const YourApp = () => {

    return (
        <NavigationContainer>
        
            <Stack.Navigator>
                <Stack.Screen name="Main" component={Main} /> …