Question

routes.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import SignIn from '~/pages/SignIn';
import SignUp from '~/pages/SignUp';

import Dashboard from '~/pages/Dashboard';

const Stack = createStackNavigator();

export default (isSigned = false) => (
  <NavigationContainer>
    <Stack.Navigator>
      {isSigned ? (
        <>
          <Stack.Screen name="SignIn" component={SignIn} />
          <Stack.Screen name="SignUp" component={SignUp} />
        </>
      ) : (
        <Stack.Screen name="Dashboard" component={Dashboard} />
      )}
    </Stack.Navigator>
  </NavigationContainer>
);

App.js

import { useSelector } from 'react-redux';

import createRouter from './routes';

export default function App() {
  const isSigned = useSelector((state) => state.auth.signed);

  const Routes = createRouter(isSigned);

  return <Routes />;
}

我使用React Navigation v5，我还是一个初学者，正在研究其新版本。但是，我无法定义此错误的原因。错误返回它需要一个函数或类，但这不是函数吗？

Error image

Answer 1

像这样更改routes.js：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import SignIn from '~/pages/SignIn';
import SignUp from '~/pages/SignUp';

import Dashboard from '~/pages/Dashboard';

const Stack = createStackNavigator();

export default ({ isSigned }) => (
  <NavigationContainer>
    <Stack.Navigator>
      {isSigned ? (
        <>
          <Stack.Screen name="SignIn" component={SignIn} />
          <Stack.Screen name="SignUp" component={SignUp} />
        </>
      ) : (
        <Stack.Screen name="Dashboard" component={Dashboard} />
      )}
    </Stack.Navigator>
  </NavigationContainer>
);

像这样更改App.js：

import { useSelector } from 'react-redux';

import Routes from './routes';

export default function App() {
  const isSigned = useSelector((state) => state.auth.signed);

  return <Routes isSigned={isSigned} />;
}

元素类型无效，应为字符串或类/函数，但有对象

1 个答案: