从 parent 组件（道具）和组件本身设置样式反应本机

Question

是否可以将 parent 的一些样式属性设置为 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;

这是我的 parent:

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'}
    />
    );
  }
};

});

我只想设置 parent 的 backgroundColor。

Answer 1

试试

首先从父级发送样式作为对象...例如 ..

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

然后在子组件里面。将其添加到样式数组

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

Answer 2

好的，我找到了解决方案。在 parent:

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',
}
};

从 parent 组件（道具）和组件本身设置样式反应本机

Set styling from parent component (props) and from component itself react native

javascript

reactjs

styles

native