React Native + Typescript: Как использовать toggleDrawer в компоненте стекового экрана? - PullRequest
Новая
       50

React Native + Typescript: Как использовать toggleDrawer в компоненте стекового экрана?

0 голосов
/ 18 марта 2020

Мой вопрос прост: какой должен быть тип navData?

Я бы хотел переключить ящик из заголовка компонента экрана стека, но Typescript жалуется, потому что toggleDrawer не существует в navData.navigation, так как этот компонент является компонентом экрана стека. Я бы хотел не делать navData: any, так какой же должен быть хороший тип? 

import React from "react";
import { View, Text, Platform } from "react-native";
import {
  NavigationStackScreenComponent,
  NavigationStackOptions
} from "react-navigation-stack";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import CustomHeaderButton from "../../components/UI/HeaderButton";

const ProductsOverviewScreen: NavigationStackScreenComponent = props => {
  return (
    <View>
      <Text>ProductsOverviewScreen</Text>
    </View>
  );
};

ProductsOverviewScreen.navigationOptions = (
  navData // What is the type?
): NavigationStackOptions => {
  return {
    headerTitle: "All Products",
    headerLeft: () => (
      <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
        <Item
          title="Menu"
          iconName={Platform.OS === "android" ? "md-menu" : "ios-menu"}
          onPress={() => navData.navigation.toggleDrawer()}
        />
      </HeaderButtons>
    ),
    headerRight: () => (
      <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
        <Item
          title="Cart"
          iconName={Platform.OS === "android" ? "md-cart" : "ios-cart"}
          onPress={() => navData.navigation.navigate({ routeName: "Cart" })}
        />
      </HeaderButtons>
    )
  };
};

export default ProductsOverviewScreen;

1 Ответ

0 голосов
/ 25 марта 2020

Быстрый и грязный способ может заключаться в том, чтобы слегка настроить его, чтобы вы могли набирать саму функцию, а не только реквизиты: ProductsOverviewScreen.navigationOptions: NavigationStackScreenComponent["navigationOptions"] = (navData) =>.... Хотя не могу гарантировать, что это сработает.

Гораздо лучшим вариантом было бы импортировать правильный реквизит из библиотеки, если вы можете (если вам не повезло в документации, проверьте репозиторий и посмотрите, какие типы экспортируются для вас) использовать).

...