Issue
ReactNative + Typescript下でNativeBaseのTextコンポーネントにglamorous-nativeでpropsを渡してstyle定義しようとする以下のようなケースで怒られました。
import React from 'react';
import { Component } from 'react';
import { Text } from 'native-base';
import glamorous from 'glamorous-native';
const Foo = (props:Props)=>{
return (
<StyledSubLabel statuColor="red">ラベル</StyledSubLabel>
);
}
const StyledSubLabel = glamorous(Text)({
fontWeight: 'bold'
}, (props)=> ({ color: props.statuColor }));
Error!!
Property 'statuColor' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes, any, any>> & Readonly<{ children?: ReactNode; }> & Readonly<...>'.
対策
glamorous(Component)({...styles}, event)で受け取るprops引数を型定義してあげると収まりました。
type StyledSubLabelProps = {
statuColor: string
}
const StyledSubLabel = glamorous(Text)({
fontWeight: 'bold'
}, (props:StyledSubLabelProps)=> ({ color: props.statuColor }));
ちなみに glamorous-nativeでは fontSize={10}
というようなstyle属性と同名のpropsを渡すと style={{fontSize: 20}}
と同じになるようでらしいのですが、同様にTypescriptだと怒られます。NativeBaseのコンポーネントを渡してるからかなとglamorous-nativeのコンポーネントでやってみましたが結果は同じでした。
上の対策同様に型を fontSize: number
と定義してあげると怒らないのですが、propsが渡ってないみたいで変化はありませんでした。
謎い… 🙃