getTheme() 本机基础类型

Question

我正在使用自定义 Native Base 样式主题，如 link 中所述。

https://docs.nativebase.io/Customize.html#theaming-nb-headref 进口：

import material from './native-base-theme/variables/material';
import getTheme from './native-base-theme/components';

return (
    <Suspense fallback="loading">
      <Provider store={store}>
        <StyleProvider style={getTheme(material)}>

在 material 上的 getTheme() 内部，我收到此 TypeScript 错误：

Argument of type '{ platformStyle: string; platform: "ios" | "android" | "windows" | "macos" | "web"; headerStyle: string; iconStyle: string; contentStyle: string; expandedIconStyle: string; accordionBorderColor: string; ... 151 more ...; Inset: { ...; }; }' is not assignable to parameter of type '{ platformStyle: any; platform: "ios" | "android" | "windows" | "macos" | "web"; accordionBorderColor: string; accordionContentPadding: number; accordionIconFontSize: number; contentStyle: string; ... 180 more ...; Inset: { ...; }; }'. Type '{ platformStyle: string; platform: "ios" | "android" | "windows" | "macos" | "web"; headerStyle: string; iconStyle: string; contentStyle: string; expandedIconStyle: string; accordionBorderColor: string; ... 151 more ...; Inset: { ...; }; }' is missing the following properties from type '{ platformStyle: any; platform: "ios" | "android"

我该如何摆脱它？

在 native-base-themes 文件夹中，有一个 material.js 文件，如下所示：

import color from 'color';
import { Platform, Dimensions, PixelRatio } from 'react-native';

import { PLATFORM } from './commonColor';

const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
const platform = Platform.OS;
const platformStyle = PLATFORM.MATERIAL;
const isIphoneX =
  platform === PLATFORM.IOS &&
  (deviceHeight === 812 ||
    deviceWidth === 812 ||
    deviceHeight === 896 ||
    deviceWidth === 896);

export default {
  platformStyle,
  platform,

  // Android
  androidRipple: true,
  androidRippleColor: 'rgba(256, 256, 256, 0.3)',
  androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
  buttonUppercaseAndroidText: true,
  // Button
  buttonFontFamily: 'Roboto',
  get buttonPrimaryBg() {
    return this.brandPrimary;
  },
  get buttonTextSizeLarge() {
    return this.fontSizeBase * 1.5;
  },

  // Header
  toolbarBtnColor: '#fff',
  toolbarDefaultBg: '#3F51B5',
  toolbarHeight: 56,
  toolbarSearchIconSize: 23,
  toolbarInputColor: '#fff',
  searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
  searchBarInputHeight: platform === PLATFORM.IOS ? 40 : 50,
  toolbarBtnTextColor: '#fff',
  toolbarDefaultBorder: '#3F51B5',
  iosStatusbar: 'light-content',
  get statusBarColor() {
    return color(this.toolbarDefaultBg)
      .darken(0.2)
      .hex();
  },
  get darkenHeader() {
    return color(this.tabBgColor)
      .darken(0.03)
      .hex();
  },

  // Text
  textColor: '#000',
  inverseTextColor: '#fff',
  noteFontSize: 14,
  get defaultTextColor() {
    return this.textColor;
  },

  // iPhoneX SafeArea
  Inset: {
    portrait: {
      topInset: 24,
      leftInset: 0,
      rightInset: 0,
      bottomInset: 34,
    },
    landscape: {
      topInset: 0,
      leftInset: 44,
      rightInset: 44,
      bottomInset: 21,
    },
  },
};

Answer 1

要快速摆脱它，您可以简单地使用 any 类型，如下所示：

<StyleProvider style={getTheme(commonColor as any)}>
要想妥善解决这个问题，就得好好研究一下这两个文件。

native-base-theme/variables/platform.js
native-base-theme/variables/commonColor.js

getTheme 中的参数类型（颜色）是从 platform.js 中的默认导出变量中推断出来的。你得到的错误意味着这两个文件中的默认导出变量不匹配。

getTheme() 本机基础类型

getTheme() native base Type

javascript

reactjs

typescript

react-native

native-base