javascript - React Native 混合风格 PropTypes

Question

我最近刚刚开始使用 React Native，并尽力成为一名优秀的小开发人员，我正在为我的组件定义 propTypes。然而，这个过程中有一点让我烦恼，那就是 style 属性类型似乎无论如何都不是“可组合的”。

<小时/>

例如，我想创建一个 Divider 组件，该组件本质上由一个具有平面 backgroundColor 和 width 的 View 组成/height 设置为thickness 属性的值；取决于它的方向。

在为 Divider 组件定义 propTypes 时，我使用 View.propTypes，正如我在互联网上看到的人们推荐的那样，仅我想使用 color 而不是 backgroundColor 来指定分隔线的颜色。 View.propTypes.style 没有 color 属性，并且似乎无法扩展/组合内置 style Prop 类型。

有人遇到过类似的问题并有合适的补救措施/解决方法吗？

<小时/>

另一个略有不同但相关的示例:假设我想开发一个 TextField 组件，它包装 TextInput 并提供其所有样式选项以及一个 icon 属性将在 TextField 的“内部”渲染指定的图标，JSX 可能看起来像这样:

render() {
    const {
        icon,
        style,   // how to efficiently spread this across View and TextInput?
        ...props
    } = this.props;

    return (
        <View style={styles.container}>
            {icon()}
            <TextInput ... />
        </View>
    );
}

我希望在相关的View和TextInput组件中提供style(例如backgroundColor) > 属性应应用于 View 组件而不是 TextInput，同样，颜色属性应应用于 TextInput 组件)。

Answer 1

因为您有一个自定义组件，所以我认为混合使用并不是一个好主意。我的建议:

(1) 如果您确实希望某人能够传入所写的“样式”，请选择一个且唯一一个该样式 Prop 将传播到的组件(例如，选择 View 并明确它应该只是样式与 View 相关的 Prop )。然后，您可以接受另一个自定义属性来定义 TextInput 的样式:

<View {...props.style} />
  <TextInput {...props.textInputStyle} />
  {/* ... */}

(2) 在组件上一一定义将修改其样式的自定义 Prop 。例如<YourComponent color="white" backgroundColor="red" />意味着你会使用 props.color定义文本组件的颜色和 props.backgroundColor将处理 View 组件的背景:

<View style={{ backgroundColor: props.backgroundColor, ... }} />
  <Text style={{ color: props.color, ... }} />
  {/* ... */}

请记住，这是您的自定义组件，您可以接受任何名称的任何 Prop !实现由您决定；在内部，您应该遵循基本组件属性名称 - 但从外部来看，您自己的自定义组件可以按照您想要的任何方式使用!