props로 구성 요소에 스타일 넘기고 덮어쓰기

예를 들어, 원형 버튼의 어셈블리인 CircleButon입니다.jsx 설정은 다음과 같습니다.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
// eslint-disable-next-line import/no-extraneous-dependencies
import { string } from 'prop-types';

// eslint-disable-next-line react/function-component-definition
export default function CircleButton(props) {
  const { children } = props;
  return (
    <View style={styles.circleButton}>
      <Text style={styles.circleButtonLabel}>{children}</Text>
    </View>
  );
}

CircleButton.propTypes = {
  children: string.isRequired,
};

const styles = StyleSheet.create({
  circleButton: {
    backgroundColor: '#C51162',
    width: 65,
    height: 65,
    borderRadius: 32,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    right: 40,
    bottom: 40,
    /* shadowはiphoneにしか効かないCSS */
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.35,
    shadowRadius: 5,
    /* elevationはAndroid用のCSS */
    elevation: 8,
  },
  circleButtonLabel: {
    color: '#fff',
    fontSize: 32,
    lineHeight: 32,
    fontWeight: 'bold',
  },
});

화면 오른쪽 아래 위치에 버튼이 있는 스타일.

props로 조정할 수 있도록 이 단추의 위치를 변경합니다.

구성 요소 스타일 변경 props 추가

원형 단추 구성 요소의 단추 위치를 조정하기 위해props를 통해 스타일을 수신할 수 있습니다.
CircleButton.jsx

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { string, shape } from 'prop-types';

// eslint-disable-next-line react/function-component-definition
export default function CircleButton(props) {
  const { children, style } = props;
  return (
    <View style={[styles.circleButton, style]}>
      <Text style={styles.circleButtonLabel}>{children}</Text>
    </View>
  );
}

CircleButton.propTypes = {
  children: string.isRequired,
  style: shape(),
};

CircleButton.defaultProps = {
  style: null,
};

const styles = StyleSheet.create({
  circleButton: {
    backgroundColor: '#D81B60',
    width: 65,
    height: 65,
    borderRadius: 32,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    right: 40,
    bottom: 40,
    /* shadowはiphoneにしか効かないCSS */
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.35,
    shadowRadius: 5,
    /* elevationはAndroid用のCSS */
    elevation: 8,
  },
  circleButtonLabel: {
    color: '#fff',
    fontSize: 32,
    lineHeight: 32,
    fontWeight: 'bold',
  },
});

부모 구성 요소에서 받은 스타일을 덮어쓰기 위해

<View style={styles.circleButton}>
・
・
・

그저 이전의 물건을 명단에 올렸을 뿐이다.
목록의 순서가 느릴수록 다시 덮어씁니다.

<View style={[styles.circleButton, style]}>
・
・
・

모 어셈블리, CircleButon.jsx 읽기

<CircleButton style={{ top: 170, bottm: 'auto' }}>+</CircleButton>

단추의 위치가 아래와 같이 덮어씌워집니다.