我正在使用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)}>
在getTheme()里面,在上material
,出现此TypeScript错误:
类型'{{platformStyle:string; 平台:“ ios” | “ android” | “窗户” | “ macos” | “网络”;headerStyle:字符串; iconStyle:字符串;contentStyle:字符串;ExpandedIconStyle:字符串;手风琴边框颜色:字符串; ...更多151 ...; 插图:{...; }; }'不可分配给'{platformStyle:any; 平台:“ ios” | “ android” | “窗户” | “ macos” | “网络”;手风琴边框颜色:字符串; AccordionContentPadding:数字;AccordionIconFontSize:数字;contentStyle:字符串;...还有180个... 插图:{...; }; }'。键入'{platformStyle:string; 平台:“ ios” | “ android” | “窗户” | “ macos” | “网络”;headerStyle:字符串; iconStyle:字符串;contentStyle:字符串;ExpandedIconStyle:字符串;手风琴边框颜色:字符串; ...更多151 ...; 插图:{...; }; }”缺少类型“ {{platformStyle:any; 平台:“ 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,
},
},
};
要快速摆脱这种情况,您可以简单地使用any
如下类型:
<StyleProvider style={getTheme(commonColor as any)}>
为了正确解决此问题,您必须研究这两个文件。
native-base-theme/variables/platform.js
native-base-theme/variables/commonColor.js
getTheme
从中的参数(颜色)的类型是根据中的默认导出变量推断出来的platform.js
。您得到的错误意味着这两个文件中的默认导出变量不匹配。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句