将样式应用于扩展React Native组件的建议方式是什么？

我已经扩展了Text组件，以便具有可自定义字体的可重用的文本组件。将样式应用于扩展React Native组件的建议方式是什么？

我的自定义组件应接受传递给它的样式并向其中添加自定义字体。

目前，我正在做这个：

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> 
     ); 
    } 

}

虽然这正常工作，具有扁平化样式表，每次似乎是错误的。以上是一个简单的例子，我可以想到其他可以使用这种模式的组件。出于这个原因，我想确保我不会忽视更合适的方法。

来源

2016-12-29 SuitedSloth

您可以为组件提供样式数组。所以你的情况下，以下将工作：''你的customStyle会覆盖样式对象上的现有键，如果你不想要把customStyle作为数组的第一项。 – cubbuk

那么这取决于你想要自定义多少。在这种情况下，如果它只是一个不同的字体，它可能类似于

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} /> 
     ); 
    } 

}

来源

2016-12-29 16:19:44

将样式应用于扩展React Native组件的建议方式是什么？

回答

相关问题