Как написать определение типа при использовании вложенной навигации в response-navigation v5 - PullRequest
Новая
       8

Как написать определение типа при использовании вложенной навигации в response-navigation v5

1 голос
/ 20 января 2020

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

Вот примеры кодов:

в моем App.tsx

export type MainStackParamList = {
  Setting: undefined
}
export type TabParamList = {
  Home: undefined
  Personal: undefined
}
const MainStack = createNativeStackNavigator<MainStackParamList>()
const Tab = createBottomTabNavigator<TabParamList>()
const RootStack = createNativeStackNavigator()

const MainStackScreen = () => (
  <MainStack.Navigator screenOptions={{ headerShown: false }}>
    <MainStack.Screen name="Setting" component={Setting} />
  </MainStack.Navigator>
)

const TabScreen = () => (
  <Tab.Navigator screenOptions={{ headerShown: false }}>
    <Tab.Screen name="Home" component={Setting} />
    <Tab.Screen name="Personal" component={Setting} />
  </Tab.Navigator>
)

const RootStackScreen = () => (
  <RootStack.Navigator screenOptions={{ headerShown: false }}>
    <RootStack.Screen name="Tab" component={TabScreen} />
    <RootStack.Screen name="Main" component={MainScreen} />
  </RootStack.Navigator>
)

в Home.tsx

type HomeRouteProp = RouteProp<TabParamList, 'Home'>
type HomeNavigationProp = CompositeNavigationProp<
  BottomTabNavigationProp<TabParamList, 'Home'>,
  NativeStackNavigationProp<MainStackParamList>
>
type Props = {
  route: HomeRouteProp
  navigation: HomeNavigationProp
}

 // ...

 navigation.navigate('Main', { screen: 'Setting' })

, а машинопись говорит, что не может назначьте «Main» для ввода «Home» | «Личный» | 'Настройка'

1 Ответ

1 голос
/ 20 января 2020

Вам также необходимо добавить типы для вашего root стека. 

type RootStackParamList = {
  Tab: undefined;
  Main: undefined;
}

Затем для вашей навигационной стойки: 

// Navigation prop for your MainStack
type MainNavigationProp = CompositeNavigationProp<
  NativeStackNavigationProp<MainStackParamList, 'Setting'>,
  NativeStackNavigationProp<RootStackParamList>
>

// Navigation prop for your Home
type HomeNavigationProp = CompositeNavigationProp<
  BottomTabNavigationProp<TabParamList, 'Home'>,
  MainNavigationProp
>

Комбинация навигационных реквизитов с использованием CompositeNavigationProp зависит от вложенности , Здесь ваш Home экран вложен в MainStack, поэтому его навигационную опору необходимо сочетать с навигационной опорой MainStack.

Предыдущий ответ:

В вашем стеке Setting, а на вкладках Home и Personal. Определения для Main нигде нет, поэтому ошибка правильная.

Похоже, что ваш Main - это ваш MainStack, который, я полагаю, вы визуализируете внутри вкладок? Затем вам нужно добавить Main: undefined в TabParamList

...