Question

由于各种限制，我无法将当前主题存储在道具中。我必须使用目前无法修改的自定义道具。我已经能够通过使用React Context来解决当前主题。

我有一个名为pageStyle的类。在其中，我有一个pageContainer，我希望能够将backgroundColor设置为暗或亮值。

通过使用this.context.theme，我可以在单独的类R中获得当前主题。 R也是我渲染FlatList对象并传递style={pageStyle.pageContainer}的地方。

我可以创建两个单独的pageContainer，分别称为pageContainerDark和pageContainerLight，并且对这两个都有正确的各自的backgroundColors。但是，这让我感到混乱。这还需要为每个样式页面提供一种方法，以确定要使用哪个pageContainer，并且该方法不可扩展。我也尝试使用全局变量，但是与此有关。

是否有一种更干净的方法来基于当前主题设置pageContainer的backgroundColor？

我在下面附加了pageStyle.ts文件。

//pageStyle.ts

import { StyleSheet} from 'react-native';

const pageStyles =  StyleSheet.create({
    pageContainer: {
        flex: 1,
        backgroundColor: "#232323"
    },
    // pageContainerDark: {
    //     flex: 1,
    //     backgroundColor: "#232323"
    // },
    // pageContainerLight: {
    //     flex: 1,
    //     backgroundColor: "#FFFFFF"
    // },
    pageContentContainer: {
        paddingBottom: 0
    }
});

// export function getPageContainerFromPageStyles(theme: string) {
//   if (theme == 'light') {
//     return pageStyle.pageContainerForLightTheme
//   } else {
//     return pageStyle.pageContainerForDarkTheme
//   }
// }

export { pageStyle };

如何将应用程序的当前主题传递到StyleSheet.create（）？

0 个答案: