在 React Native 中合并/组合两个或多个不同的 StyleSheet 组件？

Question

我按以下方式分离我的风格：

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

他们每个人都导出一个 StyleSheet 组件，在这个例子中创建：

import { StyleSheet } from 'react-native';

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

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

const baseStyles = mergeStyles(baseStyle, platformStyle);

Answer 1

你们很亲密：

const baseStyles = [baseStyle, platformStyle];

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

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

Answer 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 通常可以通过网桥和内存进行优化。直接引用样式对象将剥夺您的这些优化。

所以扁平化方法比

style={ [ styles.listItem, styles.selectedListItem ] }

更好

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

Answer 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;

Answer 5

最好的方法是使用

StyleSheet.flatten

.

例如

<button style={StyleSheet.flatten(styles.btn, {backgroundColor: 'red'})} >Start</button>

上面的代码将创建一个具有

styles.btn

属性以及红色的按钮。您还可以使用它在 StyleSheet 对象中组合多种样式，例如：

StyleSheet.flatten([styles.listItem, styles.selectedListItem])