“数字”类型的无效道具“样式”答案

【问题标题】：Invalid prop `style` of type `number`“数字”类型的无效道具“样式”
【发布时间】：2018-04-04 20:33:58
【问题描述】：

import React, { Component } from 'react';
import { Animated } from 'react-native';
import PropTypes from 'prop-types';
class Fade extends React.Component {
     Fade.propTypes = {
 visible:PropTypes.bool,
 style:PropTypes.object,
 children:PropTypes.any
};
  render() {
    const { visible, style, children, ...rest } = this.props;
    const combinedStyle = [containerStyle, style];
    return (
      <Animated.View style={this.state.visible ? combinedStyle : containerStyle} {...rest}>
        {this.state.visible ? children : null}
      </Animated.View>
    );
  }
}

我收到以下错误：提供给Fade 的number 类型的无效道具style，应为object 提供给Fade 的number 类型的无效道具style，应为object

【问题讨论】：

能否请您包含您持有此组件的父类的代码

标签： reactjs react-native eslint

【解决方案1】：

将style: PropTypes.object 更改为ViewPropTypes.style，如下所示

import React, { Component } from 'react';
import { 
 Animated,
 ViewPropTypes # <= declare
} from 'react-native';
import PropTypes from 'prop-types';

class Fade extends React.Component {

  Fade.propTypes = {
    visible: PropTypes.bool,
    style: ViewPropTypes.style,  # <= here changed 
    children: PropTypes.any
  };

  ...

}

为什么要使用ViewPropTypes.style？

因为那是一个视图组件的样式属性。

视图的样式道具 - ViewPropTypes.style

【讨论】：