组件上的 React-native 类型检查

Question

我有一个组件，我希望能够处理两种组件。一个是文本组件，另一个是图像组件。

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

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

Answer 1

如果我理解正确，您可以使用 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]} />

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

让我知道它是否有帮助，或者我是否误解了你的问题。

希望对你有帮助

Answer 2

您可以找到许多组件具有此类行为，包括一些官方组件。

例如：<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覆盖每个。