Reactjs 在React native中使用上下文和样式元素

我正在React原生应用程序中实现暗/光主题功能，但我有一个疑问。我设法让主题工作起来，但这是可能的，因为由样式表创建的样式位于组件内部。我知道变量在函数外部是不可访问的，因为它创建了自己的上下文，但是，有没有其他方法来完成功能，而不是像我所做的那样

代码

---

为什么要将其放置在组件内部？如果您使用的是React Native navigation 5，您可以扩展它提供的主题。我使用的是上下文API。您认为使用react导航主题更好吗？即使这样，您也必须使用上下文api，在这里您可以将样式移动到单独的文件并导入itI。我也有同样的问题@古鲁帕兰吉里塔兰你能详细说明一下吗？他怎么能在单独文件的样式中使用上下文中的主题变量？根据我的理解，只有React组件才能使用上下文。样式表不是React组件。您可以这样做，切换深色和浅色主题，并有条件地切换组件的样式

export function Home({ navigation }) {

    const context = useContext(ThemeContext)
    const { isLightTheme, dark, light } = context
    const actualTheme = isLightTheme ? light : dark

    const uiStyles = StyleSheet.create({
        inputStyles: {
        fontSize: 16,
        paddingHorizontal: 10,
        paddingVertical: 8,
        borderRadius: 8,
        color: actualTheme.syntax,
        paddingRight: 30,
        backgroundColor: actualTheme.ui,
        height: 65,
        marginBottom: 15
      }
    })

    const styles = StyleSheet.create({
        background: {
            flex: 1, 
            justifyContent: 'center', 
            alignItems: 'center', 
            backgroundColor: actualTheme.bg
        },

        logoTitle: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            fontFamily: 'Ubuntu_700Bold',  
        },

        img: {
            width: 52,
            height: 52
         },

         texts: {
             flex: 1,
             alignItems: 'flex-start',
             flexDirection: 'row',
             width: '100%',
             paddingHorizontal: 24   
         },

         textsView: {
             flexDirection: 'column',
             height: '100%',
         },

         mainText: {
             fontSize: 42,
             fontFamily: 'Ubuntu_700Bold',
             color: actualTheme.syntax
         },

         descriptionText: {
             fontSize: 14,
             fontFamily: 'Roboto_500Medium',
             color: actualTheme.syntax
         },

         uiContainer: {
             flex: 1,
             justifyContent: 'center',
             width: '100%',
             paddingHorizontal: 24
         },

         findBtn: {
             backgroundColor: 'springgreen',
             alignItems: 'center',
             justifyContent: 'center',
             width: '100%',
             borderRadius: 10,
             height: 65,
         },

         btnText: {
             color: '#fff',
             fontSize: 20
         },
     })


   //The function goes on...