[英]changing theme with react native elements not working?
我一直在使用 react native 元素。 我想为我的应用程序实现暗模式,但由于某种原因,当我的上下文中的 state 发生变化时,我无法让<ThemeProvider/>
中的主题道具发生变化。
这是我的上下文,我有我的 darkTheme 和 lightTheme object。 我还有一个使用lightThemeState
的 lightThemeState,所以我可以从子组件设置 state。
import React, { createContext, useState, useEffect } from "react";
import { AsyncStorage } from "react-native";
import { ThemeProvider } from "react-native-elements";
import lightTheme from "../themes/light";
import darkTheme from "../themes/dark";
export const ThemeModeContext = createContext();
export const ThemeContextProvider = (props) => {
const [lightThemeState, setLightThemeState] = useState(true);
const saveThemeState = async () => {
if (lightThemeState) {
await AsyncStorage.removeItem("lightThemeState");
} else {
await AsyncStorage.setItem(
"lightThemeState",
JSON.stringify(lightThemeState)
);
}
};
const getThemeState = async () => {
currentMode = await AsyncStorage.getItem("lightThemeState");
if (currentMode) {
setLightThemeState(JSON.parse(currentMode));
}
};
useEffect(() => {
saveThemeState();
}, [lightThemeState]);
useEffect(() => {
getThemeState();
}, []);
const currentTheme = lightThemeState ? lightTheme : darkTheme;
console.log("LIGHT THEME STATE", lightThemeState);
// When I log this after I used the setLigthThemeState in a child component. It gives the correct state ie true or false.
console.log("COLOR OF THE THEMES BACKGROUND", currentTheme.colors.background);
// This also gives the correct background for the theme that is the "currentTheme" depending on the state. So this far, everything is correct.
return (
<ThemeModeContext.Provider value={[lightThemeState, setLightThemeState]}>
<ThemeProvider theme={currentTheme}>{props.children}</ThemeProvider>
</ThemeModeContext.Provider>
);
};
export default ThemeContextProvider;
因为我有另一个用于其他逻辑的上下文。 我将<ThemeContextProvider/>
与我的其他上下文<JourneyContextProvider/>
结合起来。 像这样:
import React from "react";
import ThemeContextProvider from "./themeStore";
import JourneyContextProvider from "./journeyStore";
export const CombinedStoreProvider = (props) => {
return (
<JourneyContextProvider>
<ThemeContextProvider>{props.children}</ThemeContextProvider>
</JourneyContextProvider>
);
};
export default CombinedStoreProvider;
然后最后我将整个应用程序包装在我的<CombinedStoreProvider/>
中。 像这样。
import React from "react";
import { SafeAreaView } from "react-native";
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import Icon from "react-native-vector-icons/Ionicons";
import MoreScreenfrom "./src/screens/MoreModal";
import CombinedStoreProvider from "./store/combinedStore";
const TabNavigator = createMaterialBottomTabNavigator(
{
MoreScreen: {
screen: MoreScreen,
navigationOptions: {
title: "More",
tabBarIcon: ({ tintColor }) => (
<SafeAreaView>
<Icon style={[{ color: tintColor }]} size={25} name={"ios-more"} />
</SafeAreaView>
),
},
},
},
{
theme: ({ darkTheme }) => console.log(darkTheme),
barStyleDark: {
backgroundColor: darkTheme.colors.background,
},
barStyleLight: {
backgroundColor: lightTheme.colors.background,
},
shifting: false,
labeled: true,
initialRouteName: "MoreScreen",
activeColor: "#E4DC93",
inactiveColor: "#fff",
barStyle: { backgroundColor: "transparent", height: 80, paddingTop: 10 },
}
);
const AllRoutes = createSwitchNavigator(
{
PersonalSettings: {
title: "Personal Settings",
screen: PersonalSettings,
header: ({ goBack }) => ({
left: (
<Icon
name={"chevron-left"}
onPress={() => {
goBack();
}}
/>
),
}),
},
Tabs: {
screen: TabNavigator,
},
},
{
initialRouteName: "Tabs",
}
);
const AppContainer = createAppContainer(AllRoutes);
export default App = () => {
return (
<CombinedStoreProvider>
<AppContainer />
</CombinedStoreProvider>
);
};
这是我在上下文中切换lightThemeState
的子组件。 但即使ThemeContextProvider
中的一切看起来都很棒(我控制台记录了 state 和背景颜色,他们已经成功地改变了主题)。 但是在这个组件中,我只得到了以前的主题。 即使当我切换lightThemeState
时这个子组件重新渲染,也没有任何改变。 我知道这一点是因为在我切换主题后控制台再次登录该组件,但日志显示之前的主题 colors。 这是子组件:
import React, { useContext, useState } from "react";
import { StyleSheet, View, Text } from "react-native";
import { LayoutView, ContainerView } from "../../components/styles";
import { ThemeModeContext } from "../../../store/themeStore";
import { Card, ListItem, Avatar, ThemeContext } from "react-native-elements";
import CustomButton from "../../components/CustomButton";
const INITIAL_PERSONAL_INFO_STATE = {
name: "",
username: "",
profileImage: "",
favoriteDestinations: [],
};
const MoreModal = (props) => {
const [personalInfo, setPersonalInfo] = useState(INITIAL_PERSONAL_INFO_STATE);
const [lightThemeState, setLightThemeState] = useContext(ThemeModeContext);
const { theme } = useContext(ThemeContext);
const { navigate } = props.navigation;
const primaryColor = theme.colors.background;
console.log("COLOR IN COMPONENT", primaryColor);
// The color is from the previous theme and even thou the state has changed in the state below
console.log("LIGHT THEME STATE IN COMPONENT", lightThemeState);
return (
<LayoutView primaryColor={theme.colors.background}>
<ContainerView>
<View>
</View>
<Card
title={"Settings"}
>
<ListItem
title="Light mode"
switch={{
value: lightThemeState,
onValueChange: (value) => setLightThemeState(value),
// Here is where I set lighThemeState to false in my context
}}
bottomDivider
</Card>
</ContainerView>
<CustomButton title={"Sign in"}></CustomButton>
</LayoutView>
);
};
export default MoreModal;
也许你问的darkTheme和lightTheme有问题? 不,如果我将 state 从 true 更改为 false 并重新加载应用程序。 有用。 不知何故,主题在<ThemeProvider theme={currentTheme}/>
中没有更新。 有人可以解释为什么吗?
您不能使用 React Native Elements 动态更改主题
。 不幸的是,这在任何地方都没有记录——这是很重要的一点,因为大多数 RNE 用户会假设他们可以在运行时动态更改整个主题(嗯,我做到了)。
在 React Native Elements github 上有几个已解决的问题提到了这一点。 例如本期(2019 年 1 月),其中一位开发人员表示:
目前这是不可能的。 ThemeProvider 不允许对其道具进行运行时更改。 这是因为对 ThemeProvider 的 props 的更改将触发树下所有组件的重新渲染。
更新:您可以动态更改主题,但您必须使用 React Native Elements 提供的withTheme HOC(例如调用 withTheme 提供的 updateTheme function)。 有一点额外的布线,但它是可行的。 您可以将 HOC 包装在靠近顶层的位置,以便主题更新传播到所有子级。
正是如此。 只是想补充一点,它也可以使用useContext
。
如果您使用提供程序将您包装到级别组件,然后在您希望能够更改主题的子组件中使用useContext
挂钩,您可以像这样提取updateTheme
:
const { theme, updateTheme } = useContext(ThemeContext);
它与starlabs 的答案相同,但另一种方法和我做的方式。
为了与 react-native-elements 一起工作,我尝试动态更新它,但正如楼上指定的那样,唯一更新它的方法是这种方式,这是我第一次被迫以这种方式使用消费者 XD:
//App.js
import 'react-native-gesture-handler';
import React from "react";
import { Provider } from "react-redux";
import { store } from "./redux";
import { TranslationProvider, ColorProvider } from "./context";
import { ThemeProvider } from "react-native-elements";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { appTheme as theme } from './theme';
import App from "./navigation";
import ThemeConsumer from "./components/consumers/themeConsumer";
export default () =>
<Provider store={store}>
<SafeAreaProvider>
<TranslationProvider>
<ColorProvider>
<ThemeProvider theme={theme}>
<ThemeConsumer>
<App />
</ThemeConsumer>
</ThemeProvider>
</ColorProvider>
</TranslationProvider>
</SafeAreaProvider>
</Provider>
//themeConsumer.js
import React, { useContext, useEffect } from 'react';
import { ThemeContext } from "react-native-elements";
import { color } from '../../colors';
import { useTheme } from '../../context';
export default ({ children }) => {
const { updateTheme } = useContext(ThemeContext);
const { isDarkMode } = useTheme();
useEffect(() => {
updateTheme({ colors: color });
}, [isDarkMode()])
return (
<>
{children}
</>
)
}
您只需在 Provider 上切换useDark
即可更新主题 colors。 这有点小技巧,但似乎工作得很好。
我有点惊讶,如果以这种方式获得更新如此容易,那么库中目前似乎没有其他方法可以在没有 HOC 的情况下获得主题更新,这是一种旧的设计模式。
在 React 中更改主题 - 只需几个步骤即可实现原生。
<NavigationContainer theme={mode == 'light'? theme.light:[Here is example][1] theme.dark}> {user? <AppNavigator />: <AuthNavigator />} </NavigationContainer>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.