1. ホーム
  2. react-native

StyleSheet.createのポイントは何ですか?

2023-11-06 07:55:20

質問

を読んでいるのですが React Nativeドキュメント/チュートリアル を読んでいるのですが、この StyleSheet.create 関数は何のためにあるのでしょうか。

例えば、チュートリアルでは以下のようなコードになっています。

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

でも、その違いがよくわからない。

const styles = {
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
};

どのように解決するのですか?

TL;DR 常に StyleSheet.create() を使うようにしましょう。

ニコによる回答 は正しいのですが、それ以上のことがあります。

要約すると

  1. ニコによって言及されたように、スタイルを検証します。
  2. で述べたように ドキュメントにあるように :

スタイルオブジェクトからスタイルシートを作成することで、毎回新しいスタイルオブジェクトを作成するのではなく、IDで参照することが可能になります。

  1. にも記載されている ドキュメント :

また、ブリッジを通じて一度だけスタイルを送信することができます。それ以降のすべての使用は、id(まだ実装されていません)を参照することになります。

ご存知のように、ブリッジを介したデータの送信は非常にコストのかかる操作であり、アプリケーションのパフォーマンスに大きな影響を及ぼします。そのため StyleSheet.create() を使うことで、ブリッジへの負担を減らすことができます。