Question

假设我想使用具有以下定义样式的Component：

var styles = StyleSheet.create({
  container: {
    backgroundColor: '#ffffff'
  },
});

我可以像这样覆盖我的基本风格吗？

<Component style={backgroundColor: 'transparent'}></Component>

它对我不起作用，所以想知道这是否取决于Component是否支持该行为。

Answer 1

描述有点模糊。它是你写下自己的一个组成部分吗？假设它应该像这样工作：

export default React.createClass({
  render: function(){
    return(<View style={[ styles.container, this.props.style ]}>...</View>
  }
})

var styles = StyleSheet.create({
  container: {
    backgroundColor: '#ffffff'
  },
});

Answer 2

您可以将style道具传递到组件，并在View元素样式道具中使用数组。但是，如果来自props的style props是数组，则react native元素的style props无法处理它。因此，请使用以下函数作为util：

exprot const styleJoiner = (...arg) => arg.flat(9).filter(a => a); // 9import is{ aStyleSheet custom} depthfrom number'react-native';

现在按如下所示编写组件：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { styleJoiner } from 'utils';

export default (props)=> (
    <View style={styleJoiner(styles.container, props.style)}>
        ~~~
    </View>
);

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ffffff'
  }
});

工作很安全。

Answer 3

<View>
 <Text style={{color : 'blue' , fontSize: 20}}> Hi Keshav Gera </Text>
</View>

react-native：如何覆盖组件中定义的默认样式

3 个答案: