해결된 질문
작성
·
210
·
수정됨
0
import React, {ReactNode} from 'react';
import {
Pressable,
StyleSheet,
Text,
PressableProps,
Dimensions,
View,
StyleProp,
ViewStyle,
TextStyle,
} from 'react-native';
import {colors} from '../../constants';
import useThemeStore from '@/store/useThemeStore';
import {ThemeMode} from '@/types/common';
interface CustomButtonProps extends PressableProps {
label: string;
variant?: 'filled' | 'outlined';
size?: 'large' | 'medium';
inValid?: boolean;
style?: StyleProp<ViewStyle>;
textStyle?: StyleProp<TextStyle>;
icon?: ReactNode;
}
const deviceHeight = Dimensions.get('screen').height;
function CustomButton({
label,
variant = 'filled',
size = 'large',
inValid = false,
style = null,
textStyle = null,
icon = null,
...props
}: CustomButtonProps) {
const {theme} = useThemeStore();
const styles = styling(theme);
// 여기서는 제대로 출력이 됩니다. 값이 제대로 읽힙니다.
console.log(colors[theme].PINK_700);
return (
<Pressable
disabled={inValid}
style={({pressed}) => [
styles.container,
pressed ? styles[`${variant}Pressed`] : styles[variant],
inValid && styles.inValid,
style,
]}
{...props}>
<View style={styles[size]}>
{icon}
<Text style={[styles.text, styles[`${variant}Text`], textStyle]}>
{label}
</Text>
</View>
</Pressable>
);
}
const styling = (theme: ThemeMode) =>
StyleSheet.create({
container: {
borderRadius: 3,
justifyContent: 'center',
flexDirection: 'row',
},
inValid: {
opacity: 0.5,
},
filled: {
backgroundColor: colors[theme].PINK_700,
},
outlined: {
borderColor: colors[theme].PINK_700,
borderWidth: 1,
},
filledPressed: {
backgroundColor: colors[theme].PINK_500,
},
outlinedPressed: {
borderColor: colors[theme].PINK_700,
borderWidth: 1,
opacity: 0.5,
},
large: {
width: '100%',
paddingVertical: deviceHeight > 700 ? 15 : 10,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
gap: 5,
},
medium: {
width: '50%',
paddingVertical: deviceHeight > 700 ? 12 : 8,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
gap: 5,
},
text: {
fontSize: 16,
fontWeight: '700',
},
filledText: {
color: colors[theme].WHITE,
},
outlinedText: {
color: colors[theme].PINK_700,
},
});
export default CustomButton;
console.log(colors[theme].PINK_700); 이렇게 출력할 경우, 제대로 아래와 같이 출력이 됩니다만 스타일은 제대로 읽어오지 않습니다. 이 부분에 대해서 알고 싶습니다.
BUNDLE ./index.js
LOG Running "MatzipApp" with {"rootTag":171,"initialProps":{"concurrentRoot":false}}
LOG light
LOG #C63B64
LOG #C63B64
LOG #C63B64
ERROR TypeError: Cannot read property 'PINK_700' of undefined
This error is located at:
in CustomButton (created by ErrorBoundary)
in RCTView (created by View)
in View (created by ErrorBoundary)
in ErrorBoundary (created by RetryErrorBoundary)
in RetryErrorBoundary (created by RootNavigator)
in RootNavigator (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in _QueryClientProvider (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in MatzipApp(RootComponent), js engine: hermes
ERROR TypeError: Cannot read property 'WHITE' of undefined
This error is located at:
in RetryErrorBoundary (created by RootNavigator)
in RootNavigator (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in _QueryClientProvider (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in MatzipApp(RootComponent), js engine: hermes
ERROR TypeError: Cannot read property 'WHITE' of undefined
This error is located at:
in RetryErrorBoundary (created by RootNavigator)
in RootNavigator (created by App)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by App)
in _QueryClientProvider (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in MatzipApp(RootComponent), js engine: hermes
ERROR TypeError: Cannot read property 'WHITE' of undefined
https://github.com/dydals3440/MatZip
좀더 정확히 판단을 위하여 제가 커밋한 레포 남겨드립니다!!!