我最近在我的React Native应用程序中使用Native Base。我正在创建我的自定义主题并为我的按钮创建一些变体。如果按钮被禁用,我想更改背景颜色。
这些是默认的原生基础变体[https://github.com/GeekyAnts/NativeBase/blob/v3-pre-beta/src/theme/components/button.ts],我已经看到他们是如何使用props.isDisabled
来更改一些props的。但对我来说,console.log正在向我发送undefined
。这是我的代码
import { extendTheme } from 'native-base'
import { Dict } from 'native-base/lib/typescript/theme/tools'
const variantLogin = (props: Dict) => {
console.log('const is disabled', props.isDisabled)
return {
bg: props.isDisabled
? theme?.colors?.gray['200']
: theme?.colors?.orange?.main,
_text: {
color: props.isDisabled
? theme?.colors?.gray['500']
: theme?.colors?.white,
},
}
}
export const theme = extendTheme({
colors: {
white: '#ffffff',
black: '#000000',
gray: {
100: '#f5f5f5',
200: '#d8d8d8',
300: '#c4c4c4',
500: '#828282',
800: '#4b4a4a',
900: '#1a1a1a',
},
gold: {
main: '#e7c14d',
},
},
components: {
Button: {
variants: {
login: variantLogin
}
}
}
})
export default theme
颜色会随着
<Button isDisabled={disabled} variant={'login'}>{text}</NativeButton>
它显示和橙子按钮与白色字母,但不是当被禁用,只有更多的透明度出现。
2条答案
按热度按时间l3zydbqr1#
我不知道是否有方法传递
isDisabled
prop,但这里有一个解决方法:txu3uszq2#
你使用的是函数的变体,而不是将它们声明为对象。如果你将它们声明为对象(ex):
或者你可以只使用一个定义baseStyle和defaultProps,并使用一个带有上下文props的函数动态设置它。如果你使用函数,但你定义了超过1个
variable
,Native Base将从defaultProps.variant
中获取_disabled
的定义。