getTheme() 本机基础类型答案

【问题标题】：getTheme() native base TypegetTheme() 本机基础类型
【发布时间】：2021-01-19 02:19:34
【问题描述】：

我正在使用此链接中描述的自定义 Native Base 样式主题。

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 错误：

类型参数 '{ platformStyle: string;平台：“ios”| “安卓” | “窗户” | “马科斯” | “网络”；标题样式：字符串；图标样式：字符串；内容样式：字符串；扩展图标样式：字符串；手风琴边框颜色：细绳; ... 151 更多 ...;插图：{ ...; }; }' 不可分配给 '{ platformStyle: any; 类型的参数平台：“ios”| “机器人” | “窗户” | “马科斯” | “网络”；手风琴边框颜色：字符串；手风琴内容填充：数字；手风琴图标字体大小：数字；内容样式：字符串； ... 180 多个 ...;插图：{ ...; }; }'。类型 '{ 平台风格：字符串；平台：“ios”| “机器人” | “窗户” | “马科斯” | “网络”；标题样式：字符串；图标样式：字符串；内容风格：细绳;扩展图标样式：字符串；手风琴边框颜色：字符串； ... 还有151个……；插图：{ ...; }; }' 缺少以下属性从类型'{平台样式：任何；平台：“ios”| “机器人”

我该如何摆脱它？

在 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,
    },
  },
};

【问题讨论】：

这个错误非常冗长，以至于在我们进入重要部分之前就被切断了，即缺少哪些属性？我可以看到您提供的变量有 151 个属性，而它预期的属性有 180 个，因此可能缺少 29 个属性，但它们可能不是全部必需的。能发个demo吗？根据您提供的内容，我不知道 getTheme 函数的期望是什么。
我试图在小吃博览会上创建一个演示，但由于它没有终端，我无法运行以下命令node node_modules/native-base/ejectTheme.js。这是创建此功能所遵循的链接。我自己没有修改任何重要的东西docs.nativebase.io/Customize.html#theaming-nb-headref@LindaPaiste

标签： javascript reactjs typescript react-native native-base

【解决方案1】：

要快速摆脱这种情况，您可以简单地使用any 输入如下：

<StyleProvider style={getTheme(commonColor as any)}>
要正确解决这个问题，你必须研究这两个文件。

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

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

【讨论】：