Блог

можно ли установить некоторые свойства стиля из родительского элемента в качестве реквизита и некоторые свойства стиля из самого компонента?

Вот мой компонент:

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

});
  

Я хотел бы установить только backgroundColor из родительского.

Хорошо, я нашел решение. На родительском:

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

Попробуйте что-то вроде

Сначала отправьте стили из родительского компонента как объект … например..

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

затем внутри дочернего компонента. добавьте это в массив стилей

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