【React Native】コンポーネントのベースStyleを基に上書きする方法

2022.03.272022.01.02

Styleが設定されているコンポーネントに対し、 Styleを上書きをする方法をまとめました。

結論から言いますと、styleを配列として、配列の最後に上書きしたいstyleをpropsで渡す。これだけです！

サンプルコードがこちら

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

import Hello from './src/components/Hello';

export default function App() {
  return (
    <View style={styles.container}>
      <Hello style={{ fontSize: 16 }}>SmallWorld</Hello>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Helloコンポーネントにpropsとして、fontsize: 16が渡されています。

このstyleがHelloコンポーネント側でstyleの配列の最後に入り、textのstyleを書き換えることができます。

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

function Hello(props) {
  const { children, style } = props;
  return (
    <View>
      <Text style={[styles.text, style]}>
        {`Hello ${children}`}
      </Text>
    </View>
  );
}

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

Hello.defaultProps = {
  style: null,
};

const styles = StyleSheet.create({
  text: {
    color: '#ffffff',
    backgroundColor: 'blue',
    fontSize: 40,
    fontWeight: 'bold',
    padding: 16,
  },
});

export default Hello;

この場合、元々fontSizeが40であるところが16に上書きされます。

以上、読んでいただきありがとうございました。