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

您可以使用点差运算符组合样式表＆＃39; ...＆＃39;，请注意，最后一个实例会覆盖同名的任何变量。

下载一个小型演示应用程序来演示：

＆＃13;

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

＆＃13;

编辑：

如果你正在运行ES5，你可以使用：

const styles3 = Object.assign（styles，styles2）;

Answer 3

现在 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 4

您还可以使用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' }

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

4 个答案: