在 React Native 中将 props 的样式添加到现有组件 styles

Question

I have the following component defined:

import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';

export default class Button extends Component {
  render() {
    return (
      <TouchableOpacity onPress={() => this.props.onPress}>
        <View style={styles.container}>
          <Text
            style={{
              color: this.props.foregroundColor,
            }}
          >
            {this.props.title}
          </Text>
        </View>
      </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 15,
    paddingBottom: 15,
    paddingRight: 20,
    paddingLeft: 20
  },
});

I'd like to pass a prop backgroundColor to this component. But how do I extend the current styles.container to dynamically set backgroundColor ? I've tried

<View style={
    ...styles.container, 
    backgroundColor: this.props.backgroundColor
}>...

But I get a SyntaxError when I do that...

Answer 1

Do it like this way:

<View style={[styles.container, {backgroundColor: this.props.backgroundColor}]}>

React native will use StyleSheet.flatten to combine two object to be one style instance.

This is the same:

const newStyle = StyleSheet.flatten([
    styles.container,
    {backgroundColor: this.props.backgroundColor},
]);

Answer 2

Basically, React native use an object for the stylesheet.

To fix the above error just add {} in styles.

like this.

<View style={{
    ...styles.container, 
    backgroundColor: this.props.backgroundColor
}}>

For understanding purposes, the first bracket is used for evaluation and a second bracket is a stylesheet object that returns to the component. now you're spreading an object (container styles) inside the main object so now it merges with the styles you provided.