时间戳

首页 > 解决方案 > 反应导航自定义选项卡打字稿参数

typescript - 反应导航自定义选项卡打字稿参数

问题描述

我正在使用带有 React Native 库的 Typescript 语言开发项目。创建自定义标签栏时，参数包括状态、描述符和导航。我应该用这个指定什么类型？

import { View, Text, TouchableOpacity } from 'react-native';

function MyTabBar({ state, descriptors, navigation }) {
  const focusedOptions = descriptors[state.routes[state.index].key].options;

  if (focusedOptions.tabBarVisible === false) {
    return null;
  }

  return (
    <View style={{ flexDirection: 'row' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;
........

标签： typescriptreact-nativereact-navigation

解决方案

  • 顶部选项卡导航器 = "MaterialTopTabBarProps"
  • 底部标签栏 = "BottomTabBarProps"
import { BottomTabBarProps } from '@react-navigation/bottom-tabs';  

import { MaterialTopTabBarProps } from '@react-navigation/material-top-tabs';```

推荐阅读