Hợp nhất/Kết hợp hai hoặc nhiều thành phần StyleSheet khác nhau trong React Native?

Question

Tôi tách phong cách của tôi theo cách sau:

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

Mỗi trong số họ xuất khẩu một phần StyleSheet tạo ra như trong ví dụ này:

import { StyleSheet } from 'react-native'; 

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

Làm thế nào tôi có thể kết hợp chúng vì vậy tôi chỉ có một đối tượng kiểu cơ sở? Tôi đang tìm một cái gì đó như:

const baseStyles = mergeStyles(baseStyle, platformStyle); 

Answer 1

Bạn có thể kết hợp style sheets sử dụng toán tử lây lan '...', được cảnh báo rằng bất kỳ biến cùng tên sẽ được ghi đè bởi các trường hợp cuối cùng.

Heres một ứng dụng demo nhỏ để chứng minh:

'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

bạn đang rất gần:

const baseStyles = [baseStyle, platformStyle]; 

về cơ bản bất kỳ thành phần có thể thác phong cách như thế này:

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