0

我是 Typescript 的新手，这是我第一次尝试将类型分配给navigation.

我有一个文件，我navigationStrings喜欢这样保存：

const navigationStrings = {
  Home: 'Home',
  Auth: 'Auth',
  CategoriesMulti: 'CategoriesMulti',
  GameMultiWithTimer: 'GameMultiWithTimer',
};

export default navigationStrings;

类型.jsx

import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

// import navigationSrings from '../constants/navigationStrings';

export type RootStackParamList = {
  Home: undefined;
  Auth: undefined;
  CategoriesMulti: undefined;
  GameMultiWithTimer: undefined;
};

// const home = navigationSrings.Home

export type HomeProps = NativeStackScreenProps<RootStackParamList, 'Home'>;
export type AuthProps = NativeStackScreenProps<RootStackParamList, 'Auth'>;
export type CategoriesMultiProps = NativeStackScreenProps<RootStackParamList, 'CategoriesMulti'>;
export type GameMultiWithTimerProps = NativeStackScreenProps<RootStackParamList, 'GameMultiWithTimer'>;

当我尝试以编程方式导航时，如果我不使用类型检查，我可以使用上述字符串（如navigationStrings.GameMultiWithTimer）。

但是通过类型检查，我必须使用实际的字符串（如：）'GameMultiWithTimer'。

否则我会收到此错误：

(property) GameMultiWithTimer: string

No overload matches this call.

  Argument of type '[string]' is not assignable to parameter of type '[screen: "CategoriesMulti" | "Home" | "Auth" | "GameMultiWithTimer"] | [screen: "CategoriesMulti" | "Home" | "Auth" | "GameMultiWithTimer", params: undefined]'.

    Type '[string]' is not assignable to type '[screen: "CategoriesMulti" | "Home" | "Auth" | "GameMultiWithTimer"]'.

      Types of property '0' are incompatible.
        Type 'string' is not assignable to type '"CategoriesMulti" | "Home" | "Auth" | "GameMultiWithTimer"'.

  Overload 2 of 2, '(options: { key: string; params?: undefined; merge?: boolean | undefined; } | { name: "CategoriesMulti" | "Home" | "Auth" | "GameMultiWithTimer"; key?: string | undefined; params: undefined; merge?: boolean | undefined; }): void', gave the following error.

    Argument of type 'string' is not assignable to parameter of type '{ key: string; params?: undefined; merge?: boolean | undefined; } | { name: "CategoriesMulti" | "Home" | "Auth" | "GameMultiWithTimer"; key?: string | undefined; params: undefined; merge?: boolean | undefined; }'.ts(2769)

同样在 Routes.tsx 中，如果我使用RootStackParamList，则可以访问Home，但navigationStrings.Home会出现上述错误。

const Stack = createNativeStackNavigator<RootStackParamList>();

const Routes = () => {
  const [userLoggedIn, setUserLoggedIn] = useState<boolean>(false);
  useEffect(() => {
    (async () => {
      const localId = await AsyncStorage.getItem(storageKeys.localId);
      console.log('App: localId', localId);
      if (localId) setUserLoggedIn(true);
    })();
  });

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={'Home'}>
        {userLoggedIn ? (
          <Stack.Screen name={navigationStrings.Home} component={Home} />

编辑：我不得不提一下，当我打开引号时，navigation.navigate('')我会自动得到一个包含所有屏幕的元组。所以navigationStrigs不是真的需要！

这当然是因为正如文档中提到的那样：

这（即RootStackParamListin const RootStack = createStackNavigator<RootStackParamList>();）将为 Navigator 和 Screen 组件的 props 提供类型检查和智能感知。

谢谢！

4

0 回答 0