Question

我刚刚开始使用React Native并尽我所能成为一名优秀的小开发人员，我正在为我的组件定义int readUserInput(std::istream& input) { int value; std::cout << "Enter a number: "; input >> value; return value; } TEST(Some, Test) { std::ifstream ifs; ifs.open("someFile", std::ifstream::in); // in production code pass std::cin std::cout << "readUserInput from std::cin: " << readUserInput(std::cin) << std::endl; // in testing pass some mock data from the file (or whatever) std::cout << "readUserInput from ifs: " << readUserInput(ifs) << std::endl; ifs.close(); }。然而，有一件事让我对这个过程感到烦恼，propTypes道具类型似乎不会以任何方式“组合”。

例如，我想创建一个style组件，该组件基本上由Divider组成，其中View和backgroundColor / width设置为height属性的值;取决于它的方向。

在为thickness组件定义propTypes时，我使用Divider，因为我看到互联网上的人推荐，但我只想使用View.propTypes代替color指定分隔符的颜色。 backgroundColor没有View.propTypes.style属性，似乎无法扩展/组合内置的color道具类型。

有没有人遇到过类似的问题并且有一个不错的补救措施/解决方法？

另一个略有不同但又相关的示例：假设我想开发一个style组件，它包装TextField并提供所有的样式选项以及一个TextInput道具，它将呈现指定的图标“内部”和icon左侧的JSX可能看起来像这样：

TextField

我希望在相关的render() { const { icon, style, // how to efficiently spread this across View and TextInput? ...props } = this.props; return ( <View style={styles.container}> {icon()} <TextInput ... /> </View> ); }和style组件中提供View点差（例如TextInput属性应该应用于backgroundColor组件不是View，同样color属性应该应用于TextInput组件。

Answer 1

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

（1）如果你真的希望有人能够传递＆＃34;风格＆＃34;如上所述，选择一个且只有一个组件，其中样式道具将传播到（例如选择视图并明确它应该只是与视图相关的样式道具）。然后，您可以接受另一个定义TextInput样式的自定义道具：

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

（2）在组件上逐一定义自定义道具，以修改其样式。对于例如<YourComponent color="white" backgroundColor="red" />表示您将使用props.color来定义文本组件的颜色，而props.backgroundColor将会处理视图组件的背景：

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

请记住，它是您的自定义组件，您可以接受任何道具，任何名称！实施取决于您;在内部，您应该遵循基本的组件道具名称 - 但是从外部开始，您自己的自定义组件可以以您喜欢的任何方式使用！

React Native混合样式PropTypes

1 个答案: