RN-切换主题-简洁版
2021-04-21 本文已影响0人
精神病患者link常
实现功能:切换背景色
使用技术点:context
1. 声明context
import {createContext} from 'react'
export const ThemesContent = createContext({
color:'', // 颜色
changeColor:()=>{} // 修改颜色
})
2.程序入口使用
function StackNavigator() {
// 默认背景色
const [themesColor, setThemesColor] = useState('red')
return <ThemesContent.Provider value={{
color:themesColor,
changeColor:(color)=>{
// 修改背景色
setThemesColor(color)
}
}}>
<Stack.Navigator>
<Stack.Screen name={'TransitionalPage'} component={TransitionalPage}/>
<Stack.Screen name={'TabNavigator'} component={TabNavigator}/>
<Stack.Screen name={'Login'} component={Login}/>
{RenderRoutes()}
</Stack.Navigator>
</ThemesContent.Provider>
}
3.页面内部使用
import { ThemesContent } from '../../common/Themes'
const themesContent = React.useContext(ThemesContent)
<View style={[styles.mainView,{backgroundColor:themesContent.color}]}>
<TouchableOpacity onPress={()=>{
// 修改主题背景色
themesContent.changeColor('blue')
}}>
<Text>点击修改主题背景色</Text>
</TouchableOpacity>
...