如何将道具中的值应用于样式？

Question

我创建了一个自定义组件：

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

const Square = ({size, color, onPress, children}) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.sqr}>{children}</View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  sqr: {
    width: this.size,
    height: this.size,
    backgroundColor: this.color,
    ...
  },
});

export default Square;

正如您在上面的sqr 样式中看到的，我尝试使用通过props 传入的size 和color。

我通过以下方式在另一个组件中使用Square：

<Square size={30} color="black" .../>

但是在运行我的应用程序时不会应用大小和颜色。

那么，如何在自定义组件的样式中使用传入的值？

Answer 1

有几种方法可以在您的 react-native 组件中处理条件样式。在您的示例中，您只能在Square 组件本身中访问size 和color，而不是Stylesheet.create 创建的对象。在这种情况下，通常会将对象列表传递给您可以访问这些值的 style 属性：

const Square = ({size, color, onPress, children}) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <View
        style={[styles.sqr, { height: size, width: size, color: color }]}
      >
        {children}
      </View>
    </TouchableOpacity>
  );
};

由于style 属性接受对象列表，您还可以更进一步地根据传递给组件的道具提供“活动”类。如果您需要从父级传入样式对象并可能打开/关闭一些假设的“活动”样式，这里有一个更复杂的示例：

const Square = ({size, color, onPress, otherStyles, active, children}) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <View
        style={[
          styles.sqr,
          otherStyles,
          { height: size, width: size, color },
          active ? styles.active : null,
        ]}
      >
        {children}
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  active: {
    backgroundColor: 'red',
  },
});