2016-10-07 3 views
9

私は、このようにスタイルを定義しています:StyleSheet.createを使用する必要はありますか?

const styles = StyleSheet.create({ 
    container: {}, 
    tabContent: { 
     alignItems: "flex-start", 
     flexDirection: "column", 
     padding: 21 
    }, 
    tabHeader: { 
     flex: 0, 
     fontSize: 10, 
     paddingTop: 10, 
    }, 
    tabText: { 
     flex: 0, 
     fontSize: 14, 
     paddingTop: 10, 
     textAlign: "left" 
    }, 
}) 

はしかし、一度は私がStyleSheet.createを使うのを忘れていましたし、プレーンなオブジェクトを使用:

const styles = { 
    container: {}, 
    tabContent: { 
     alignItems: "flex-start", 
     flexDirection: "column", 
     padding: 21 
    }, 
    tabHeader: { 
     flex: 0, 
     fontSize: 20, 
     paddingTop: 10, 
    }, 
    tabText: { 
     flex: 0, 
     fontSize: 14, 
     paddingTop: 10, 
     textAlign: "left" 
    }, 
} 

は、驚くべきことに、それが働いていたが。 StyleSheet.createを使用してスタイルを定義する必要がありますか、または単純なオブジェクトを使用できますか?

答えて

7

I と考えてください。可能であれば、通常のオブジェクトを使用するよりもパフォーマンスが良いです。

リアクトから

ネイティブドキュメント:

パフォーマンス:

  • スタイルオブジェクトからスタイルシートを作り、それが可能な新しいスタイルオブジェクトを毎回作成するのではなく、IDで参照することができます。
  • また、ブリッジを一度だけ送信することもできます。それ以降のすべての使用はid(まだ実装されていません)を参照します。

似た質問と、それはパフォーマンスのためStyleSheetを使用することがまだ良いですと言って誰かと(それはgithubの問題だったと思う)どこかで何かを見て覚えておいてください。

希望すると便利です。

+2

を行うことはできませんstyle={Object.assign({}, style1, { color })}何かのように、私はスタイルオブジェクトを構成することができるようにプレーンなオブジェクトを使用することを好みます。 {cursor: 'pointer'}を実行すると、通常のオブジェクトでエラーはスローされません。 StyleSheetでそれを行うと、エラーをキャッチします。 – arcom

-3

間違った方法があります。

使用StyleSheet.create、あなたの取得します赤い画面のエラーヒント:

const styles = StyleSheet.create({ 
 
    container: { 
 
    flexDirection:"row", 
 
    alignItems:"center", 
 
    fontSize:"20",//error 
 
} 
 
});

ありません使用StyleSheet.create、あなたは警告してしまいます。

const styles = { 
 
    container: { 
 
    flexDirection: "row", 
 
    alignItems: "center", 
 
    fontSize: "20", //error 
 
    } 
 
};

-1

@デビッドは、コンパイル時に行く何かに言及されていない限り、私はスタイルオブジェクトからスタイルシートを作り、ここ

ドキュメントが代わりに新しいを作成するのIDで それを参照することが可能になると考えていますスタイルオブジェクトを毎回作成します。

は、手動でタグにstyle={{ ... }}を追加することを指しています。

スタイルオブジェクトを任意のコンポーネントファイルにインポートするだけで、ファイル全体でもスタイルオブジェクトを再利用しないようにするのはかなり簡単です。

は個人的に、私はあなたが私も定期的にオブジェクトがエラーをスローしないであろうことに気づいStyleSheet

関連する問題