从父组件(props)和组件本身设置样式 反应本机

Question

是否可以将父级的一些样式属性设置为props，将组件本身的一些样式属性设置为样式属性？

这是我的组件：

import React,{ Component } from 'react';
import { View, Text } from 'react-native';
class BackgroundMar extends Component {
render(){
    return (
        <View style={[styles.viewStyle]}>
            <Text>{this.props.test}</Text>
        </View>
    )
    }
};
var styles = {
viewStyle: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: props.color
}
};
export default BackgroundMar;

这是我的父母：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import BackgroundMar from "./components/BackgroundMar";
export default class App extends React.Component {
  render() {
    return (
    <BackgroundMar
        test={'aaa'}
        color={'#ff2044'}
    />
    );
  }
};
});

我只想设置父级的背景颜色。

Answer 1

好的，

我找到了解决方案。在父级上：

export default class App extends React.Component {
render() {
return (
    <BackgroundMar
        test={'#52a03f'}
    />
);
}
};

在组件本身上：

class BackgroundMar extends Component {
render(){
    return (
        <View style={[styles.viewStyle, { backgroundColor: this.props.test}]}>
            <Text>{this.props.test}</Text>
        </View>
    )
}
};
var styles = {
viewStyle: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
}
};

Answer 2

尝试类似

首先将父级的样式作为对象发送...前任。。

style={{color:"#abcd"}}

然后在子组件内部。 将其添加到样式数组

<View style={this.props.style ? [styles.viewStyle, this.props.style] : 
  [styles.viewStyle]}>