使用 React Native 从样式表覆盖单个 Style Prop

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

使用 React Native 从样式表覆盖单个 Style Prop

Overriding a Single Style Prop from Stylesheet Using React Native

react-native-flexbox

react-native-stylesheet