在 React Native 中合并/组合两个或多个不同的样式表组件？答案

【问题标题】：Merge / Combine two or more different StyleSheet components in React Native?在 React Native 中合并/组合两个或多个不同的样式表组件？
【发布时间】：2017-05-08 10:49:02
【问题描述】：

我按以下方式分隔我的样式：

styles /
|-- base.js
|-- base.ios.js
|-- base.android.js

每个都导出一个样式表组件，如本例所示：

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
    statusBar: {
    height: 20
});

如何合并它们，这样我只有一个基本样式对象？我正在寻找类似的东西：

const baseStyles = mergeStyles(baseStyle, platformStyle);

【问题讨论】：

我不确定是否有内置的方法可以做到这一点，但将对象组合在一起很简单。也许只是将您的样式表文件保留为普通对象，然后合并它们，然后只在您实际插入样式的地方调用Stylesheet.create
@azium 是的，我想这样做......但是我想知道是否有一个选项可以合并两个已经创建的样式表组件
如果要合并特定样式，只需使用数组：[base.button, platform.button]
这是一个选项，是的

标签： reactjs merge styles react-native

【解决方案1】：

你很亲密：

const baseStyles = [baseStyle, platformStyle];

基本上任何组件都可以像这样层叠样式：

<View style={[styles.style1,styles.style2]}></View>

【讨论】：

是的，但前提是它们支持样式，例如，如果我在 View 元素中设置 textAlign，它不会是级联的。
你拯救了我的一天。 {...} 的合并不允许在同一组件中使用样式。正确的做法是你展示的。
这种用法存在性能问题。看我的回答stackoverflow.com/a/57039103/586522

【解决方案2】：

您也可以使用StyleSheet.flatten 方法。请参阅文档here。

var styles = StyleSheet.create({
  listItem: {
    flex: 1,
    fontSize: 16,
    color: 'white',
  },
  selectedListItem: {
    color: 'green',
  },
});

StyleSheet.flatten([styles.listItem, styles.selectedListItem]);
// returns { flex: 1, fontSize: 16, color: 'green' }

更新：

StyleSheet.flatten 在内部使用 StyleSheetRegistry.getStyleByID(style) 来解析由 ID 表示的样式对象。 ID 通常可以通过网桥和内存进行优化。直接引用样式对象将剥夺您的这些优化。

所以flatten方法比style={ [ styles.listItem, styles.selectedListItem ] }好

【讨论】：

这种方法比直接在 style props 中使用数组更好吗？ style={ [ styles.listItem, styles.selectedListItem ] }
有一个关于flatten on the docs 的警告：请谨慎行事，因为滥用它会在优化方面给您带来负担。 ID 通常可以通过网桥和内存进行优化。直接引用样式对象将剥夺您的这些优化。

【解决方案3】：

您可以使用扩展运算符“...”组合样式表，请注意，任何同名变量都将被最后一个实例覆盖。

这里有一个小演示应用程序来演示：

'use strict';
import React, { Component } from 'react';
import {
   Alert,
   Button,
   StyleSheet,
   Text,
   AppRegistry,
   View,
 } from 'react-native';

class listTest extends Component {

render() {
  return (

   <View style={styles3.myViewBox}>
      <Text style = {styles3.myTextBox1}>
        TEST
      </Text>
    </View>
   );
  }
 }

const styles = StyleSheet.create({
  myTextBox1: {
     backgroundColor:'red',
  },
  myViewBox: {
    backgroundColor:'blue',
    margin:15,
    padding:15,
  }

});

const styles2 = StyleSheet.create({
  myTextBox2: {
    backgroundColor:'yellow',
  },
  myViewBox: {
    backgroundColor:'green',
    margin:15,
    padding:15,
  },
});

const styles3 = {...styles,...styles2};

AppRegistry.registerComponent('listTest', () => listTest);

编辑：

如果你运行的是 ES5，你可以使用：

const styles3 = Object.assign(styles,styles2);

【讨论】：

> "message": "Uncaught SyntaxError: Unexpected identifier"
值得注意的是，这个语法是2018年新增的：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
@Green 最小 ES6 语法

【解决方案4】：

现在 ReactNative 允许您使用更实用的方法组合两种样式。使用 StyleSheet.compose 函数，您可以按照文档执行以下操作：

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

const App = () => (
  <View style={container}>
    <Text style={text}>React Native</Text>
  </View>
);

const page = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 30,
    color: '#000'
  },
});

const lists = StyleSheet.create({
  listContainer: {
    flex: 1,
    backgroundColor: '#61dafb',
  },
  listItem: {
    fontStyle: 'italic',
    fontWeight: 'bold'
  },
});

const container = StyleSheet.compose(page.container, lists.listContainer); // if you wanna compose more than one style just use a map.reduce function and compose two at the time until you have consumed you list of styles
const text = StyleSheet.compose(page.text, lists.listItem);

export default App;

【讨论】：