React-Native，为不同的视图使用特定的样式参数

Question

我正在创建自定义按钮，并使用带有Text的TouchableOpacity。我想分别使用TouchableOpacity和Text的特定样式项目(例如padding，backgroundColor用于TouchableOpacity和color，FontSize用于Text(。挑战是我有自己的

我的代码应该是这样的：

const styles = StyleSheet.create({
 container: {
    flex: 1,
    alignItems: 'center',
    padding:10,
    backgroundColor:'red',
  },
 text:{
    color:'white'
  }
}
<TouchableOpacity style={[styles.container, {background: this.props.style.backgroundColor, padding: this.props.style.padding}]}>
     <Text style={[styles.text, {color:this.props.style.color}]}>{label}</Text>
</TouchableOpacity>

它有错误并说找不到this.props.style.backgroundColor(我测试了有和没有样式(如果它应该工作，它应该以两种形式工作((。我也想将这些样式作为道具发送。

编辑

我将样式作为props传递给我的按钮，如下所示：

  `<CustomButton style={backgroundColor:'red', padding: 3 , textColor:'blue'} label={'Click Me'}/>`

Answer 1

您应该创建另一个类似颜色.js.js并在那里添加颜色(或更多(，如下所示：

export const valid = 'green';
export const background = 'red';

然后使用

import * as Colors from './colors';

并Colors.background或Colors.valid等使用它