TouchableHighlight, TouchableOpacity 사용해서 버튼 구현

web 소스로 변환하려면 react-native에서 제공하는 button 사용해야하는데 ios, and, web 스타일이 다르게 제공되는 이슈가 있어 web 생각하지 않고 native 대응만 하도록 함

[코결과]

import { styles } from './Btn.style.ts';

import { useCallback } from 'react';
import {
  type GestureResponderEvent,
  type PressableProps,
  View,
  TouchableOpacity,
  TouchableHighlight
} from 'react-native';

import Text from '../text/Text';
import theme from '../../theme';

type Props = {
  children: string;
  size: 36 | 40 | 44 | 48;
  disabled?: boolean;
  wide?: boolean;
} & Omit<PressableProps, 'ref'>;

const Button = (
  { children, size, disabled = false, wide = false, ...props }: Props,
) => {
  const handlePress = useCallback(
    (event: GestureResponderEvent) => {
      props.onPress?.(event);
    },
    [props]
  );

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={[
          styles.button,
          styles[`button${size}`],
          disabled && styles.disabled,
          wide && styles.wide,
        ]}
        activeOpacity={0.5} //터치 시 투명도
        onPress={handlePress}>
        <Text style={styles.buttonText}>
          {children}
        </Text>
      </TouchableOpacity>

      <TouchableHighlight
        style={[
          styles.button,
          styles[`button${size}`],
          disabled && styles.disabled,
          wide && styles.wide,
        ]}
        disabled={disabled}
        underlayColor={theme.color_primary_80} //터치시 색깔 주기
        onPress={handlePress}>
        <Text style={styles.buttonText}>
          {children}
        </Text>
      </TouchableHighlight>
    </View>
  );
};

export default Button;

import { *styles* } from './Btn.style.ts';import { useCallback } from 'react';import { type GestureResponderEvent, type PressableProps, View, TouchableOpacity, TouchableHighlight} from 'react-native';import *Text* from '../text/Text';import *theme* from '../../theme';type Props = { children: string; size: 36 | 40 | 44 | 48; disabled?: boolean; wide?: boolean;} & Omit<PressableProps, 'ref'>;const Button = ( { children, size, disabled = false, wide = false, ...props }: Props,) => { const handlePress = useCallback( (event: GestureResponderEvent) => { props.onPress?.(event); }, [props] ); return ( <View style={*styles*.container}> <TouchableOpacity style={[ *styles*.button, *styles*[button${size}], disabled && *styles*.disabled, wide && *styles*.wide, ]} activeOpacity={0.5} //터치 시 투명도 onPress={handlePress}> <Text style={*styles*.buttonText}> {children} </Text> </TouchableOpacity> <TouchableHighlight style={[ *styles*.button, *styles*[button${size}], disabled && *styles*.disabled, wide && *styles*.wide, ]} disabled={disabled} underlayColor={*theme*.color_primary_80} //터치시 색깔 주기 onPress={handlePress}> <Text style={*styles*.buttonText}> {children} </Text> </TouchableHighlight> </View> );};export default Button;

[결과]