использование элементов контекста и стиля в React native - PullRequest
Новая
       62

использование элементов контекста и стиля в React native

0 голосов
/ 16 июня 2020

Я реализую функциональность темной / светлой темы в приложении React Native, но у меня есть сомнения. Мне удалось заставить темы работать, но это было возможно только потому, что мои стили, созданные таблицей стилей, были расположены внутри компонента. Я знаю, что переменные недоступны вне функции, потому что она создает свой собственный контекст, но есть ли другой способ получить функциональность вместо того, что я сделал?

code 

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...
...