Question

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

我有一些默认样式，比如我希望能够将颜色应用到两个组件的颜色，但是，文本元素可以在其样式中使用颜色键，但在图像上，它必须是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覆盖每个Ext.create({ xtype: 'treelist', reference: 'navigationTreeList', itemId: 'navigationTreeList', ui: 'nav', store: Ext.create('Ext.data.Store', { fields: [{ name: 'text' }], root: { expanded: true, children: [{ text: 'Dashboard', iconCls: 'x-fa fa-home', rowCls: 'nav-tree-badge', viewType: 'dashboardcei', routeId: 'cei/dashboardcei', leaf: true }, { text: 'Create Application', iconCls: 'x-fa fa-send', rowCls: 'nav-tree-badge', routeId: 'cei/create-application', viewType: 'create-application', leaf: true }, { text: 'Application Status', iconCls: 'x-fa fa-user', routeId: 'cei/application-status', viewType: 'application-status', leaf: true } ] } }), width: 250, expanderFirst: false, expanderOnly: false, listeners: { afterrender: function(tree) { var selection = tree.getStore().getData().items[1]; // bydefault "create application page should be open instead of dashboard" tree.fireEvent('selectionchange', tree, selection); } } });。

对组件进行react-native类型检查

2 个答案: