コンポーネントのスタイルを上書きするprops

コンポーネントにstyleをpropsで渡して上書きする

例えば、丸ボタンのコンポーネントCircleButton.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',
  },
});

画面の右下の位置にボタンがくるstyleをつけている。

このボタンの位置をpropsで調整できるように変更する。

コンポーネントのstyleを変更するpropsを追加する

丸ボタンのコンポーネントのボタンの位置を調整するために、styleを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',
  },
});

親コンポーネントから受け取ったstyleを上書きするためには、

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

だったのものを、リストにして並べるだけ。
リストの順が遅いものほど新しく上書きされていく。

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

親コンポーネントで、CircleButton.jsxを読み込んで

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

とすると、ボタンの位置が上書きされて下記のようになる。