javascript - 从父组件（道具）和组件本身设置样式反应原生

Question

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

这是我的组件：

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

});

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

标签： javascriptreactjsstylesnative

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