React Native-Theming 지원!
유튜브 링크: https://youtu.be/wW20AkwmGMk
Github 링크: https://github.com/KJ-GM/theme-csx
감사합니다!
예시
// Styles
import { StyleSheet, T, appearanceHook } from 'theme-csx';
// Components
import { Text, View } from 'react-native';
import { Button } from '@components/atoms';
const DemoComponent = () => {
// Theme switch
const switchTheme = () => {
appearanceHook.switch(
appearanceHook.activeTheme === 'dark' ? 'light' : 'dark'
);
};
return (
<View style={T(styles.THEMED_CONTAINER)}>
<Text style={styles.NORMAL_TEXT}>Hey, I am normal text</Text>
<Text style={T(styles.THEMED_TEXT)}>Hey, I am themed text</Text>
<Button text={'Switch theme'} onPress={switchTheme} />
</View>
);
};
const styles = StyleSheet.create({
THEMED_CONTAINER: {
flex: 1,
backgroundColor: 'white',
backgroundDark: 'gray', // backgroundDark prop was added to make it themeable
alignItems: 'center',
justifyContent: 'center',
},
NORMAL_TEXT: {
fontWeight: 'bold',
fontSize: 14,
color: 'green',
},
THEMED_TEXT: {
fontWeight: 'bold',
fontSize: 14,
color: 'black',
colorDark: 'white', // colorDark prop was added to make it themeable
},
});
Reference
이 문제에 관하여(React Native-Theming 지원!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kjgm/react-native-theming-support-nod텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)