Блог

У меня есть react native приложение с navigation определенным стеком:

  <Stack.Navigator
            initialRouteName={NavigationLocations.SIGNUP}
            ...
            }}>
           ...
            <Stack.Screen
                name={NavigationLocations.SHEET}
                component={Sheet}
                options={
                    {
                        title: "Character sheet",
                        headerLeft: null
                    }}
            />
        </Stack.Navigator>
 

Это мое navigation props определение:

 export type RootStackParamList = {
    Signup: undefined,
    Login: undefined,
    Dashboard: undefined,
    SheetView: {sheet: ISheet}
};
 

Как я должен определить реквизит листа в компоненте, который получает sheet объект, переданный навигацией?

 type Props = StackScreenProps<RootStackParamList, NavigationLocations.SHEET>

export default function Sheet({sheet}: Props) {
    const sheet = props.route.params.sheet;
 

В настоящее время я получаю эту ошибку: Error:(11, 32) TS2339: Property 'sheet' does not exist on type 'StackScreenProps<RootStackParamList, NavigationLocations.SHEET>'.

Я использую NavigationLocations enum, потому что мне обычно не нравится использовать строки в качестве идентификаторов, но я думаю, что моя реализация привела к ошибке здесь. Что я делаю не так?

StackScreenProps Просто включает типы для реквизита navigation и route .

 type Props = {
    navigation: StackNavigationProp<RootStackParamList, NavigationLocations.SHEET>;
    route: Route<NavigationLocations.SHEET, {
        ...;
    }>;
}
 

Похоже, вы пытались получить доступ sheet к реквизиту верхнего уровня:

 function Sheet({sheet}: Props) {
 

А также как вложенное свойство:

 const sheet = props.route.params.sheet;
 

Этот второй правильный. Мы можем снять некоторые уровни вложенности, если сделаем это:

 export default function Sheet({ navigation, route }: Props) {
  // sheet has type ISheet
  const {sheet} = route.params;
 

Перечисление не должно быть проблемой, если значение перечисления соответствует ключу в RootStackParamList . Я получаю другую ошибку, когда она не совпадает, так что это не ваша проблема.