Question

我定义了以下组件：

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

我想将道具backgroundColor传递给此组件。但是，如何将当前styles.container扩展为动态设置backgroundColor？我试过了

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

但是当我这样做时，我得到SyntaxError ......

Answer 1

这样做：

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

React native将使用StyleSheet.flatten将两个对象组合成一个样式实例。

这是相同的：

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

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

1 个答案: