android 在react native中将导航传递到函数

6psbrbz9 于 2023-04-28 发布在 Android

关注(0)|答案(2)|浏览(106)

以前的开发人员出于任何原因传递null，这给出了：
TypeError：null不是计算tabNavigation.navigate的对象。
代码如下：

import { NavigationRef } from './RootNavigation';

const renderBackToDashboard = (tabNavigation: any) => {
    return <HeaderBackButton tintColor={defaultOptions.headerTintColor||'white'} labelVisible={defaultOptions.headerBackTitleVisible||false} onPress={() => { tabNavigation.navigate(SCREEN_NAMES.DASHBOARD_TAB); }} />
}

const testViews = (tabNavigation: any, isLoggedIn: boolean) => {
    return (
        <>
            <Stack.Screen name={SCREEN_NAMES.LEGAL} component={LegalDisclosure} options={{ title: t('legal'), headerLeft: () => renderBackToDashboard(tabNavigation), headerRight: () => isLoggedIn ? renderLogo(tabNavigation) : null }} />
            <Stack.Screen name={SCREEN_NAMES.DATA} component={DataProtection} options={{ title: t('data'), headerLeft: () => renderBackToDashboard(tabNavigation),  headerRight: () => isLoggedIn ? renderLogo(tabNavigation) : null }} />
            <Stack.Screen name={SCREEN_NAMES.GUEST} component={GUEST} options={{ title: t('guest'), headerLeft: () => renderBackToDashboard(tabNavigation), headerRight: () => isLoggedIn ? renderLogo(tabNavigation) : null }} />
        </>
    );
};

const getLoggedOutScreens = () => {
    return (
        <Stack.Navigator screenOptions={defaultOptions}>
            <Stack.Screen name={SCREEN_NAMES.AUTH} component={AuthScreen} options={{ headerShown: false }} />
            {testViews(null, false)}
            <Stack.Screen name={SCREEN_NAMES.MY_SCREEN} component={MyScreen} options={{ title: t('myScreen') }} />
        </Stack.Navigator>
    );
};

return (
    <NavigationContainer ref={NavigationRef} theme={MyTheme}>
        {loggedIn ? getLoggedInScreens() : getLoggedOutScreens()}
        {loggedIn ? <UserErrorComponent /> : null}
    </NavigationContainer>
);

RootNavigation.ts

import React from 'react';

export const NavigationRef = React.createRef<any>();

class Nav {
    navigate = (name: string, params?: any) => {
        NavigationRef.current?.navigate(name, params);
    };
}

export const RootNavigation = new Nav();

我试过了：{testViews(NavigationRef, false)} , {testViews(NavigationRef.current, false)} , {testViews({NavigationRef}, false)}
不起作用。我很高兴有任何建议。
在tabNavigation.navigate(SCREEN_NAMES.DASHBOARD_TAB);处触发错误

android

来源：https://stackoverflow.com/questions/76106025/passing-navigation-into-function-in-react-native

2条答案

按热度按时间

igsr9ssn1#

您的项目导航结构看起来很好。但是RootNavigation.ts可能需要像这样修改。

RootNavigation.ts

import { createNavigationContainerRef } from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef()

export function navigate(name: string, params?: any) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name, params);
  }
}

在此导航容器中包含的任何屏幕中，您可以使用以下代码进行导航。

//Import navigation like this
import * as RootNavigation from './RootNavigation';

const renderBackToDashboard = () => {
  return (
    <HeaderBackButton 
      tintColor={defaultOptions.headerTintColor||'white'} 
      labelVisible={defaultOptions.headerBackTitleVisible||false} 
      onPress={() => { 
        //you can use this line to navigate
        RootNavigation.navigate(SCREEN_NAMES.DASHBOARD_TAB); 
      }} 
    />
  )
}

你可以在react-navigation文档中看到更多https://reactnavigation.org/docs/navigating-without-navigation-prop/#usage

赞(0）回复(0）举报 2023-04-28

eimct9ow2#

下面的更改修复了我的错误：

const testViews = (isLoggedIn: boolean) => {
    const getTestDefaultOptions = ({navigation}: {navigation: any}) => ({
        headerRight: () => isLoggedIn ? renderLogo(navigation) : null
    });

    return (
        <>
            <Stack.Screen
                name={SCREEN_NAMES.LEGAL}
                component={LegalDisclosure}
                options={ (props) => ({
                    ...getTestDefaultOptions(props),
                    title: t('legalDisclosure')
                })} />
            <Stack.Screen
                name={SCREEN_NAMES.DATA}
                component={DataProtection}
                options={ (props) => ({
                    ...getTestDefaultOptions(props),
                    title: t('dataProtection'),
                })} />
            <Stack.Screen
                name={SCREEN_NAMES.GUEST}
                component={GUEST}
                options={ (props) => ({
                    ...getTestDefaultOptions(props),
                    title: t('guest')
                })} />
        </>
    );
};

赞(0）回复(0）举报 2023-04-28

我来回答

android 在react native中将导航传递到函数

2条答案

相关问题

热门标签

最新问答