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

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 属性接受对象列表，您还可以更进一步，根据传递给组件的道具提供 'active' 类。这是一个更复杂的示例，如果您需要从父级传入样式对象并可能切换 on/off 一些假设的 'active' 样式：

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

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

How to apply values from props to styles?

react-native

react-native-stylesheet

react-native-component