拡張されたReact Nativeコンポーネントにスタイルを適用するための推奨される方法は何ですか？

Question

カスタムフォントで再利用可能なテキストコンポーネントを使用するために、Textコンポーネントを拡張しました。

私のカスタムコンポーネントは、渡されたスタイルを受け入れてカスタムフォントを追加する必要があります。

私は現在、これをやっている：

MyText.js

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


export default class MyText extends React.Component { 

    render() { 

     const style = 
      Object.assign({}, 
       StyleSheet.flatten(this.props.style), 
       {fontFamily: "My Font"} 
      ); 

     return (
      <Text style={style}> 
       {this.props.children} 
      </Text> 
     ); 
    } 

} 

予想通り、これは動作しますが、スタイルシートを毎回平らにするために持つことは間違っているようです。上の例は簡単な例で、このパターンを使用できる他のコンポーネントについて考えることができます。そのため、私はより適切なアプローチを無視していないことを確認したいと思います。

Answer 1

これは、カスタマイズしたいと思う程度によって異なります。この場合、別のフォントの場合は、

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



export default class MyText extends React.Component { 

    render() { 
     const filteredProps = _.omit(this.props, 'style'); 
     return (
      <Text style={[{fontFamily: "My Font"}, this.props.style]} {...filteredProps} /> 
     ); 
    } 

}