react-native 中自定义 StyleSheet 属性

在 react-native 中,StyleSheet 是一个比较好的样式和代码分离的方式,但是默认提供的 StyleSheet 不是很充足。一个很常见的点击之后发生颜色变化的文本控件都没有默认提供,如果说我们自定义一个 TextHighlightable 控件,同时又希望能在 StyleSheet 中来指定字体点击之后的颜色的话,那就需要对默认提供的 StyleSheet 系统进行扩充了。

在目前的版本 0.14.2 中,react-native 没有提供官方的扩充 StyleSheet 的方式,我们这里需要使用比较hack的方法来进行,不保证兼容未来的版本。

StyleSheet 相关的代码是放置在目录 react-native/Libraries/StyleSheet 下面的,当我们使用下面这样的代码来创建一个样式时

var styles = StyleSheet.create({
  container: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
  },
  title: {
    fontSize: 19,
    fontWeight: 'bold',
  },
  activeTitle: {
    color: 'red',
  },
});

会先进入到 StyleSheetValidation.js 中进行样式的格式验证,扩充 StyleSheet,主要需要做的事情就是通过 addValidStylePropTypes 来扩充 StyleSheetValidation。

例如,在 TextHighlightable 控件中增加 colorHighlight 样式,就像下面这样:

var styles = StyleSheet.create({
  textButton: {
    color: '#d6d7da',
    colorHighlight: 'red',
  },
});

如果不扩充 StyleSheetValidation 的话,程序就会出现错误,“Error: Invariant Violation: “colorHighlight” is not a valid style property.”。扩充也很简单,在创建样式之前,增加下面一些代码就可以了。

var StyleSheetValidation = require('StyleSheetValidation');
var ReactPropTypes = require('ReactPropTypes');
var ViewStylePropTypes = require('ViewStylePropTypes');
var TextHighlightableStylePropTypes = Object.assign(Object.create(ViewStylePropTypes), {
  colorHighlight: ReactPropTypes.string,
});
StyleSheetValidation.addValidStylePropTypes(TextHighlightableStylePropTypes);

然后,我们就可以在 stylesheet 中使用 colorHighlight 了。在 TextHighlightable 组件中,我们可以使用 flattenStyle 来获取到所配置的 style 信息,如:

  render() {
    var style = _.extend({}, flattenStyle(this.props.style));
    if(this.state.isPressing && style.colorHighlight) {
      style.color = style.colorHighlight;
    }
    delete style['colorHighlight'];
    return (
      <TouchableWithoutFeedback {...touchableProps}>
        <Text style={style}>{this.props.children}</Text>
      </TouchableWithoutFeedback>
    );
  },
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Verify Code   If you cannot see the CheckCode image,please refresh the page again!