☰

React-Native で動的スタイリングを行う最もパフォーマンスの高い方法は何ですか? 質問する

tag-icon • tag-icon performance react-native dynamic styles stylesheet
React-Native で動的スタイリングを行う最もパフォーマンスの高い方法は何ですか? 質問する

React-Nativeでは、スタイルシートCSS のようなスタイルシートを作成します。プレーンな js-objects の代わりに を使用する主な理由は、styleshee.createパフォーマンスの向上です。ただし、多くの場合、コンポーネントのプロパティに基づいて動的にコンポーネントのスタイルを設定する必要があります。基本的に、これを行うには 3 つの方法があります。

次の例に注意してください:const styles ...これは一般的なパターンであり、異なるコンポーネント間でスタイルを共有する可能性があるため、コンポーネントの外部で宣言することを検討してください。ツリーのドットの下にあるすべてをレンダリング関数の一部と見なしてください。

  1. スタイルの配列を使用する:

    const styles = StyleSheet.create({viewStyle: {backgroundColor:'red'}})
...
return <View style={[styles.viewStyle, {color: this.props.color}]} />

  2. Stylesheet.flatten の使用:

    const styles = StyleSheet.create({viewStyle: {backgroundColor:'red'}})
...
const flattenedStyle = StyleSheet.flatten(styles.viewStyle, {{color: this.props.color}})
return <View style={flattenedStyle} />

  3. 関数を使用してスタイルシートを作成する:

    const styles = (color) => StyleSheet.create({
    viewStyle: {
        backgroundColor:'red',
        color: color
        }
    })
...
const style = styles(this.props.color).viewStyle
return <View style={style} />

パフォーマンスの点ではどのアプローチが最適か、あるいはもっとパフォーマンスの高い別の方法はあるのか疑問に思っています。オプション 2 と 3 は、プロパティの変更時に新しいスタイルシートを動的に作成すると、スタイルシートの目的全体が損なわれるため、まったく適さないと思います。この件に関して、ご意見やヒントがあれば、ぜひお聞かせください。

ベストアンサー1

ここでは、各スタイリングに対して、React Native で動的なスタイリングを行うことができます。

このような

<Text style={styles.simpleText('red')}>Required field</Text>

// In styling
const styles = StyleSheet.create({
     simpleText: (colorProp = 'black') => ({ // default black set
           fontSize: 14,
           color: colorProp,
     })
})

条件付きスタイルに任意のデータ型を渡すこともできます

おすすめ記事