@areslabs/with-color-theme v0.0.1

安装依赖

npm install @jdreact/with-color-theme

说明

@jdreact/with-color-theme 提供了

• ThemeContext

• ThemeProvider

在入口页中引入 ThemeProvider.

如:

import { ThemeProvider } from '@jdreact/with-color-theme';
class JDReactAPIDemos extends Component {
    render() {
        return (
            <ThemeProvider>
                <Navigation />
            </ThemeProvider>
        );
    }
}

• withColorTheme

withColorTheme 是一个高阶组件，使用方法为 withColorTheme(options)(WrapperComponent)

options 可以缺省，但是如果需要通过 ref 获取组件实例，那么必须传递 {forwardRef: true}

如:

module.exports = withColorTheme({forwardRef: true})(ViewExample);

和 react-redux 一起使用:

module.exports = connect(mapStateToProps,mapDispatchToProps,null,{forwardRef: true})(withColorTheme({forwardRef: true})(ViewExample));

• mergeStyle

mergeStyle(styles, key, colorTheme)

• styles 是属性对象
• key 是 styles 中一个 key 值
• colorTheme 是当前的主题， light / dark

如:

mergeStyle(styles, 'content', this.props.colorTheme)`

返回的值为:

[styles.content, styles.contentDark] //colortheme 为 dark 时
[styles.content, styles.contentLight] //colortheme 为 light 时

将 styles.content 中的颜色设置，移至 styles.contentDark 和 styles.contentLight 中

• setFirstCharUppercase(str)

将字符串的首字母转大写