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覆盖样式表中的单个样式属性

1 个答案: