对组件进行本机类型检查答案

【问题标题】：react-native type check on component对组件进行本机类型检查
【发布时间】：2018-05-19 13:18:36
【问题描述】：

我有一个组件，我希望能够处理两种组件。一个是 Text 组件，另一个是 Image 组件。

我有一些默认样式，例如我希望能够将其应用于两个组件的颜色，但是，文本元素可以在其样式中使用颜色键，但在图像上，它必须是 tintColor 键。

有什么方法可以检查我拥有的元素，以便为每个元素设置适当的样式？

【问题讨论】：

标签： reactjs react-native components typechecking

【解决方案1】：

你会发现很多组件都有这样的行为，包括一些官方的。

例如：<ScrollView /> 与 style、contentContainerStyle、indicatorStyle。

对于您的组件，它可能是：

<CompositeComponent
  style={{backgroundColor: 'red'}}
  textStyle={{color: 'black'}}
  imageStyle={{tintColor: 'black'}}
  />

在您的 render() 函数中，

render() {
  return (
    <View>
      <Text style={{[this.props.style, this.props.textStyle]}} />
      <Image style={{[this.props.style, this.props.imageStyle]}} />
    </View>
  );
}

这样<Text /> 和<Image /> 共享相同的style，然后分别用textStyle 或imageStyle 覆盖。

【讨论】：

【解决方案2】：

如果我理解正确，您可以使用 3 个样式对象来处理它：

const styles = StyleSheet.create({
  default: { marginTop: 10, borderWidth: 1 },
  onlyButton: { borderColor: '#F0F' },
  onlyText: { borderColor: '#C9F' },
})

<Text style={[styles.default, styles.onlyText]} />
<TouchableOpacity={[styles.default, styles.onlyButton]} />

请注意，上面的代码可能有错别字，这只是一个展示想法的示例。

如果有帮助，或者我误解了你的问题，请告诉我。

希望对你有帮助

【讨论】：