在React Native中合併/合併兩個或多個不同的StyleSheet組件？

我通過以下方式分離我的風格：在React Native中合併/合併兩個或多個不同的StyleSheet組件？

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

來源

2016-12-22 R01010010

我不知道是否有內置的方式來做到這一點，但它微不足道的組合對象。也許只是保持你的樣式表文件爲普通對象，然後合併它們，只調用'Stylesheet.create'在那裏你實際插入樣式 – azium

@azium yep我認爲這樣做...但是我不知道是否有一個選項可以合併兩個已經創建樣式表組件 – R01010010

如果你想合併特定的樣式，只需使用數組：'[base.button，platform.button]' – sodik

可以使用蔓延運營商相結合的樣式表「...」，予以警告，同一名稱的任何變量將由最後一個實例被覆蓋。

繼承人小的演示應用演示：

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

來源

2016-12-22 18:59:58

你是非常接近：

const baseStyles = [baseStyle, platformStyle];

基本上任何組件都可以級聯樣式是這樣的：

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

來源

2016-12-23 23:28:00 Tarek

是的，但只有他們支持的風格，例如，如果我設置textAlign在View元素中，它不會是級聯的。 – R01010010

你救了我的一天。 {...}合併不允許在同一個組件中使用樣式。正確的方法是你展示。 –

在React Native中合併/合併兩個或多個不同的StyleSheet組件？

回答

相關問題