如何在React-native中使用样式化组件主题?

时间:2020-08-25 05:53:09

标签: react-native styled-components

我已经完成了代码的设置,但是我无法在defaultProps上设置主题颜色。考虑以下代码。

Colors.js

/*
 * GLOBALS
 */
const colors = {
  transparent: 'transparent',
  success: '#4caf50',
  danger: '#D75361',
  labelColor: '#767676',
  inactiveField: '#f2f2f2',
  inactiveButton: '#b7dbdd',
  inactiveIcon: '#EBEBEB',
  primaryHover: '#464488',
  secondary: '#f8f8f8',
  secondaryHover: '#f8f8f8',
  yellow: '#FCD58A',
  yellowHover: '#c8ab6d',
  borderColor: '#dadada',
  black: '#000000',
  white: '#ffffff',
  primary: '#2B7CFA',
  headingColor: '#0f2137',
  quoteText: '#343d48',
  textColor: 'rgba(52, 61, 72, 0.8)',
  linkColor: '#6967D0'
}


/*
 * EXPORTS
 */
export default colors

ButtonComponent.js

/*
 * IMPORTS
 */
import { View } // Npm: react-native library.
import styled from 'styled-components'// Npm: React.js styled-components Library.


/*
 * OBJECTS
 */
const SwitchWrapper = styled(__Switch.View)`
  backgroundColor: ${props => props.theme.primary} <--- This works fine.
`

/*
 * EXPORTS
 */
export default Button

但是现在如果在defaultButton的defaultProps中添加backgroundColor:'primary'我会出错。

WrappingButton.js

import Button from '----Code Above ----'

const ButtonClick = (...props) => <Button {...props} />

ButtonClick.defaultProps = { backgroundColor: 'primary' <----- This is not working and throwing error, even after using themeGet('colors.primary') }

ButtonClick也没有包装在themeProvider中。

0 个答案:

没有答案