ReactNativeでstyleをグローバルに設定する

アプリ全体のText Componentのcolorを一括指定してしまいたい、というときのやり方。 公式で推奨されているやり方によると、アプリ専用のコンポーネントを作成してそれを使いなさい、ということみたいです。

facebook.github.io

具体的には /custom/Text.js みたいなファイルを用意して、以下のように書けば良さそうです。

import React, { Component } from 'react';
import { Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  appText: {
    fontSize: 16,
    color: '#66605D',
  },
});

export class AppText extends Component {
  render() {
    return (
      <Text {...this.props} style={[styles.appText, this.props.style]}>
        {this.props.children}
      </Text>
    );
  }
}

実際に使用する側では、 import { Text } from 'react-native'; を書き換えて import { AppText } from '../custom/Text'; みたいに読み込んでやれば良いです。