प्रतिक्रिया मूल में दो या दो से अधिक स्टाइलशीट घटकों को मिलाएं/मिलाएं?

Question

मैं निम्नलिखित तरीके से मेरी शैली को अलग कर रहा हूँ:

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

Answer 1

आप प्रसार ऑपरेटर का उपयोग स्टाइल शीट गठजोड़ कर सकते हैं '...', चेतावनी दी है कि एक ही नाम के किसी भी चर पिछले उदाहरण द्वारा ओवरराइट किया जाएगा।

उसके बारे में यहां छोटे डेमो एप्लिकेशन प्रदर्शित करने के लिए:

'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

आप बहुत करीब हैं:

const baseStyles = [baseStyle, platformStyle]; 

मूल रूप से किसी भी घटक इस तरह शैलियों झरना कर सकते हैं:

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