Styled-Components로 React Native Pressable 꾸미기

 

 

React Native의 기본 StyleSheet를 활용할 때에는 아래와 같이 <Pressable>이 pressed 되었을 때를 꾸밀 수 있다

<Pressable
	style={({pressed}) => [
		styles.submit,
		Platform.OS === 'ios' && pressed && styles.submitPressed,
	]}
	android_ripple={{color: '#42a5f5'}}
	onPress={onPress}>
    <Text style={styles.submitText}>
    	회원가입
    </Text>
</Pressable>

const styles = StyleSheet.create({
  submit: {
    marginTop: 24,
    backgroundColor: '#2196f3',
    height: 56,
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center',
  },
  submitPressed: {
    opacity: 0.75,
  },
  submitText: {
    fontSize: 16,
    color: 'white',
    fontWeight: 'bold',
  },
});

 

 

Styled-Component를 사용할 때에는 React-native의 <Pressable>과 Styled-Component로 감싼 <View>를 함께 사용해서 만들 수 있다

import React from 'react';
import {Pressable} from 'react-native';
import Styled from 'styled-components/native';

const StyledView = Styled.View`
  margin: 5px;  
  border-radius: 10px;
  border-width: 1px;
  border-color: black;
  height: 30px;
  width: 60px;
  align-items: center;
  justify-content: center;
  opacity: ${({pressed}) => (pressed ? 0.55 : 1)};  
`;
const Text = Styled.Text``;

interface Props {
  text: string;
  onPress(): void;
}

function Button({text, onPress}: Props) {
  return (
    <Pressable onPress={onPress}>
      {({pressed}) => (
        <StyledView pressed={pressed}>
          <Text>{text}</Text>
        </StyledView>
      )}
    </Pressable>
  );
}

export default Button;

누르면 opacity가 바뀌며 깜빡임