react-native-flexbox - 使用 React Native 覆盖样式表中的单个样式道具

Question

使用 React Native，我希望使用 StyleSheet 来定义样式，然后在许多组件中使用该样式，但我想更改或覆盖一些组件的单个道具。例如，一组 10 个视图，有 5 种不同的颜色，但所有其他道具都相同。这可能吗？语法是什么样的？

我无法想象我必须定义 5 种不同的样式或使用内联样式。非常感谢您的帮助。

Answer 1

您可以从单个模块中导出一些全局使用的样式，然后在需要的地方导入它们。然后要组合样式，您可以使用 [styleA, styleB] 之类的数组语法。

因此，在一个简单的示例中，您可以执行以下操作：

// ./styles.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  containerDefault: {
    height: 100,
    width: 300,
    backgroundColor: 'black'
  },
  backgroundBlue: {
    backgroundColor: 'blue'
  },
  backgroundGreen: {
    backgroundColor: 'green'
  }
});

接着...

// ./SomeComponent.js

import React from 'react';
import { View, Text } from 'react-native';
import styles from './styles';

const ComponentBlack = () => {
  return (
    <View style={styles.containerDefault}>
      <Text>I should be black</Text>
    </View>
  );
};

const ComponentBlue = () => {
  return (
    <View style={[styles.containerDefault, styles.backgroundBlue]}>
      <Text>I should be blue</Text>
    </View>
  );
};

const ComponentGreen = () => {
  return (
    <View style={[styles.containerDefault, styles.backgroundGreen]}>
      <Text>I should be green</Text>
    </View>
  );
};

export default () => {
  return (
    <View>
      <ComponentBlack />
      <ComponentBlue />
      <ComponentGreen />
    </View>
  );
};