我想将一些道具（值）传递到另一个页面，我正在使用stackNavigator

应用程序.js：

import Insert from "./components/pages/Insert";
import ViewData from "./components/pages/ViewData";

const Stack = createStackNavigator();

NavigationContainer>
        <Stack.Navigator headerMode={false}>
          <Stack.Screen name="Insert Your data" component={Insert} />
          <Stack.Screen name="ViewData" component={ViewData} />
        </Stack.Navigator>
      </NavigationContainer>

插入.js

const Insert = ({ props, navigation: { navigate } }) => {
  const [enteredName, setEnteredName] = useState();
  const [enteredSurname, setEnteredSurname] = useState();

const sendValues = (enteredName, enteredSurname) => {
    setEnteredName(enteredName);
    setEnteredSurname(enteredSurname);
    navigate("ViewData", {
      name: enteredSurname,
      surname: enteredSurname
    });
  };

...

<View>
          <Button
            title="Submit"
            onPress={() => sendValues(enteredName, enteredSurname)}
          />

ViewData.js …

我正在使用 React Navigation 5，我希望我的选项卡栏在特定屏幕上有所不同。我尝试了很多事情，但没有成功...我希望第二个屏幕的 tabIcon 仅当活动屏幕是第二个屏幕时才可见，并且当我在同一屏幕上时更改选项卡背景颜色。这是我的代码和两张照片来展示我想做的事情。

import React from 'react';
import 'react-native-gesture-handler';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

import Photo from './Home';
import Folders from './Folders';
import Search from './Search';

import CustomIcon from './components/CustomIcon.js';

import { Dimensions } from "react-native";

const Tab = createMaterialTopTabNavigator();

export default function TabNavigator() {
  return (
    <Tab.Navigator
    initialRouteName = 'Photo' 
    tabBarOptions= {{
        activeTintColor: '#FFCD29',
        inactiveTintColor: 'white',
        showLabel: true, //icons in label because maxsize of tabBarIcons is 25
        showIcon: false,
        indicatorStyle:{height: 0},
        pressColor: 'transparent', 
        pressOpacity: 0, …

我正在用来react-navigation createBottomTabNavigator创建底部选项卡导航。标签栏在 iOS 上显示正常，但在 Android 上显示如下：

我不确定是什么导致了这种奇怪的造型。下面是我创建底部标签栏的代码：

    <Provider store={store}>
      <NavigationContainer theme={GlobalConfig.theme}>
        <Tab.Navigator
          screenOptions={({route}) => ({
            tabBarIcon: ({focused, color, size}) => {
              let iconSrc

              if (route.name === 'Alarms') {
                iconSrc = require('../img/ic_alarm.png')
              } else if (route.name === 'Settings') {
                iconSrc = require('../img/ic_settings.png')
              }

              return (
                <Image
                  source={iconSrc}
                  style={{
                    tintColor: focused
                      ? GlobalConfig.theme.colors.primary
                      : GlobalConfig.theme.colors.tabBarIconUnselected
                  }}
                />
              )
            }
          })}
          tabBarOptions={{
            activeTintColor: GlobalConfig.theme.colors.primary,
            inactiveTintColor: GlobalConfig.theme.colors.tabBarIconUnselected
          }}>
          <Tab.Screen name={I18n.t('alarms')} component={AlarmsTab} />
          <Tab.Screen name={I18n.t('settings')} component={SettingsTab} />
        </Tab.Navigator>
      </NavigationContainer>
    </Provider>

每个选项卡都是一个堆栈导航器。警报堆栈导航配置如下：

    <Stack.Navigator
      initialRouteName="AlarmListScreen" …

我的问题是我无法将函数作为参数传递给react-navigation v5 中的标头组件。

从filtersscreen.js中下面给定的代码中，我想将savefilters传递给navigation.js中的headerRight。

我可以在log-1中查看保存参数。但是为什么我无法在 log-2（即 FilterNavigator）中获取保存参数。

当我使用 setParams() 时，我收到警告 - “在导航状态中发现不可序列化的值，这可能会破坏持久化和恢复状态等使用。如果您传递了不可序列化的值（例如函数、类），则可能会发生这种情况params 中的实例等。如果您需要在选项中使用带有回调的组件，则可以使用 'navigation.setOptions' 代替。请参阅https://reactnavigation.org/docs/troubleshooting.html#i-get-the-warning -我们在导航状态中找到了不可序列化值以获取更多详细信息。”

当我使用navigation.setOptions({ save: savefilters })时，我无法在route.params.save中找到保存

我是反应原生新手，我请求你帮助我解决这个问题。

我阅读了文档React Navigation v5。

我记录了下面的输出。谢谢。

导航.js

const FiltersNavigator = props => {
  return (
    <screen.Navigator initialRouteName="Filters">
      <screen.Screen
        options={{
          title: 'Filters',
          headerRight: () => (
            <View>
              <TouchableNativeFeedback>
                <MaterialCommunityIcons
                  name="content-save"
                  color="white"
                  size={28}
                  style={{padding: 15}}
                  onPress={() => console.log(props)} //log-2 attached below
                />
              </TouchableNativeFeedback>
            </View>
          ),
        }}
        name="Filters Meals"
        component={FiltersScreen}
      />
    </screen.Navigator>
  );
};

FilterScreen.js

const FilterSwitch = props => …

我正在使用 React Native 和 React Native 导航。当我尝试访问 Route.params 时，它说它是一个未定义的对象。我可以使用 this.props.navigation.navigate 方法导航到 PokeDetails 屏幕，但我无法从 route.params.etc 获取参数......请参阅下面的代码。谢谢！

//Home.js

import React, { useState } from "react";
import { View, Text , Button, FlatList, ActivityIndicator, TouchableOpacity, Image } from "react-native";
import { GlobalStyles } from "../styles/GlobalStyles";
import PokeDetails from "./PokeDetails";



class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: [],
        }
    }

    componentDidMount() {
        fetch(`https://pokeapi.co/api/v2/pokemon/?limit=20`)
            .then((res)=> res.json())
            .then((response)=> {
                this.setState({
                    isLoading: false,
                    dataSource: response.results,
                })
                console.log("RESPONSE",response)
                console.log("RESPONSE.RESSSULTS",response.results)
            })

    } …

在React Navigation 5 Auth Flow中，它表示当条件状态发生变化时屏幕将自动导航。

• 我已将屏幕设置为当
  isAuthenticated 的状态更改为 true 时导航到 HomeScreen。
• 控制台中没有错误。isAuthenticated 确实更改为 true，但状态更改后屏幕未导航到主屏幕。
• 我还尝试在操作创建器中使用 {NavigationActions} 和 {CommonActions} 等替代方案。强制导航，但也不起作用。

AuthStackNav.js

import React from 'react';
import { connect } from 'react-redux';
import {createStackNavigator} from '@react-navigation/stack';
import AuthScreen from '../screens/AuthScreen';
import HomeScreen from '../screens/HomeScreen';

const AuthStackNav = ({isAuthenticated}) => {
    const AuthStack = createStackNavigator();

    return (        
        <AuthStack.Navigator initialRouteName='Auth'>
        {
            isAuthenticated ?
            <AuthStack.Screen name='Home' component={HomeScreen} />                
            :
            <AuthStack.Screen  name='Auth' component={AuthScreen} />      
        }                       
                         
        </AuthStack.Navigator>
        
    );
};
const mapStateToProps = ({isAuthenticated}) => { …

我是 React navtive 的新手，想知道如何处理 React-navigation v5 的路由名称。

我正在开始一个公司内部样板项目，在版本 4 中使用反应导航，并将其更新到版本 5。到目前为止，一切运行良好。

现在的问题是，该项目使用的文件的所有路由名称定义如下：

export const HOME_ROUTE = 'Home';
export const LOGIN_ROUTE = 'Login';
export const REGISTER_ROUTE = 'Register';

这也适用于 React-navigation v5。

然后我想消除任何类型的导航道具上的警告。文档指出我应该添加类型定义。然后我遇到了第一个问题。

对于路线常量，我希望以某种方式这样做：

export type RootStackParamList = {
  HOME_ROUTE: undefined;
  LOGIN_ROUTE: undefined;
  REGISTER_ROUTE: undefined;
};

这不起作用，因为我找不到在类型定义中使用常量的方法（这是有道理的）。

我正在考虑完全删除路线常量，但缺点是我在输入路线名称时没有自动完成功能，这可能会导致难以发现错误。至少我认为这可能会发生。

有处理这个问题的首选方法吗？我研究了其他一些样板项目，但它们都只是使用字符串作为路由名称。

当我向右滑动时，我的抽屉打开，但我希望使用标题中的按钮打开它。我已将 DrawerNavigator 'createDrawer ' 放置在 StackNavigator 'createHomeStack' 旁边。

我收到此错误：

参考错误：找不到变量：导航

我也尝试过这个：options={({ navigation }) => ({但随后出现错误：

类型错误：navigation.toggleDrawer 不是函数。（在“navigation.toggleDrawer（）”中，“navigation.toggleDrawer”未定义）

代码：

import React from 'react';
import { TouchableOpacity } from 'react-native';
import {
  NavigationContainer,
  DrawerActions,
  DefaultTheme,
  DarkTheme,
  useNavigation,
} from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {
  Appearance,
  useColorScheme,
  AppearanceProvider,
} from 'react-native-appearance';

import Feed from './src/feed';
import Detail from './src/detail';

import Screen1 from './src/screens/drawer/screen1';
import Screen2 from './src/screens/drawer/screen2'; …

我正在尝试使用反应导航为应用程序编写测试，但遇到了正确读取路线和参数的问题。

我收到一个错误

类型错误：无法读取未定义的属性“params”

在const [leadId] = useState(route.params.leadId);

我的组件看起来像

export default function AComponent() {
  const route = useRoute();
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const [leadId] = useState(route.params.leadId);
}

我已尝试遵循https://callstack.github.io/react-native-testing-library/docs/react-navigation/Warning: React.createElement: type is invalid但在包装组件时收到了。

我的测试看起来像

import React from 'react';
import { Provider } from 'react-redux';
import { NavigationContainer } from '@react-navigation/native';
import { render, fireEvent, cleanup } from 'react-native-testing-library';
import configureMockStore from 'redux-mock-store';

import AComponent from 'components/contact/AComponent';

const mockStore = configureMockStore([]);

describe('<AComponent />', () => …

如何在 React 导航底部选项卡中使用图像作为图标？我的图像位于项目内的一个文件夹中，但首先我不确定是否可以使用该Import {anyComponent} from 'anyPath' 方法导入图像。另外，我不知道如何将这些自定义图像设置为图标。如果有人能帮助我，我将不胜感激。

多谢！