React RN 之 createContext换肤处理

1.创建themeContext.js 创建Themes.js  文件

themeContext.js

import {createContext} from 'react';
import Themes from './Themes';

export default createContext(Themes.dark);

Themes.js

export default {
    dark:{
        name:'dark',
        backgroundColor: '#20232a',
        themeColor:'#20232a',
        color:'#fff'
    },
    green:{
        name:'green',
        backgroundColor: '#e6e6e6',
        themeColor:'#49d1b1',
        color: '#1a1a1a'
    }
}

2. 项目入口

import ThemeContext from './utils/themeContext'
import Themes from './config/Themes';

const {themeStatus} = props // 当前颜色状态从redux中获取
<ThemeContext.Provider value={Themes[themeStatus]}>
    <Router />
</ThemeContext.Provider>

3. 页面

import React, {useContext} from 'react';
const CustomSetting = (props) => {
      const theme = useContext(themeContext); 获取到theme中设置的颜色
      const {change} = props // redux 中改变颜色的方法
      return (
<IoniconsIcon name={'color-palette-sharp'} style={{...styles.icons,color:theme.color}} />
)}

export default connect((state)=>({themeStatus:state.themeReducer}),{...themeAction})(CustomSetting);