Scal/połącz dwa lub więcej różnych komponentów StyleSheet w React Native?

Question

mam oddzielając moje style w następujący sposób:

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

każdy z nich eksportuje komponent StyleSheet utworzonego jak w poniższym przykładzie:

import { StyleSheet } from 'react-native'; 

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

Jak mogę połączyć je tak, mam tylko jedno obiekt w stylu podstawowym? Szukam czegoś podobnego:

const baseStyles = mergeStyles(baseStyle, platformStyle); 

Answer 1

Można łączyć arkusze stylów za pomocą operatora spread „...”, powinien być ostrzeżony, że wszelkie zmienne o tej samej nazwie zostanie zastąpiony przez ostatniej instancji.

Herezje niewielka aplikacja demo wykazać:

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

Answer 2

jesteś bardzo blisko:

const baseStyles = [baseStyle, platformStyle]; 

zasadzie każdy składnik może kaskada stylów tak:

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