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

y4ekin9u  于 2023-05-01  发布在  React
关注(0)|答案(5)|浏览(325)

我将按以下方式分离样式:

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

zaq34kh61#

你非常接近:

const baseStyles = [baseStyle, platformStyle];

基本上,任何组件都可以级联样式如下:

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

ikfrs5lh2#

也可以使用StyleSheet.flatten方法。请参阅此处的文档。

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 ] }

fnvucqvd

fnvucqvd3#

您可以使用展开操作符'组合样式表。..',则警告所有同名的变量将被最后一个示例覆盖。
这里有一个小的演示应用程序来演示:

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

编辑:
如果你正在运行ES 5,你可以用途:
const styles3 = Object。sort(sort,sort);

pwuypxnk

pwuypxnk4#

现在,ReactNative允许您使用更实用的方法合并两种样式。使用函数StyleSheet。编写,以便您可以按照文档执行以下操作:

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

azpvetkf5#

最好的方法是使用StyleSheet.flatten
举个例子

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

上面的代码将创建一个具有styles.btn属性以及红色的按钮。您还可以使用它在StyleSheet对象中合并多个样式,如:

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

相关问题