2016-12-22 14 views
6

: Ben bu yüzden sadece bir tane var bunları birleştirebilirsiniz nasılİki veya daha fazla farklı StyleSheet bileşenini React Native içinde birleştir/Birleştir? Ben şu şekilde benim stilleri ayıran ediyorum

import { StyleSheet } from 'react-native'; 

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

:

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

Her biri bu örnekte olduğu gibi oluşturulan bir StyleSheet bileşeni ihraç Temel stil nesnesi? Gibi bir şey için arıyorum: Sen yaymak operatörünü kullanarak stil sayfaları birleştirebilir

const baseStyles = mergeStyles(baseStyle, platformStyle); 
+0

Bunu yapmak için yerleşik bir yol olup olmadığından emin değilim, ancak nesneleri bir araya getirme konusundaki önemsiz. Belki sadece stil sayfalarınızı düz nesneler olarak tutun, ancak bunları birleştirin ve sadece stilleri – azium

+0

@azium yep'e eklediğiniz "Stylesheet.create" olarak adlandırın. Bunu yapmayı düşünmüştüm ... ama yine de iki tane birleştirmek için bir seçenek var mı diye merak ediyorum belirli stilleri birleştirmek istiyorsanız, stil sayfası bileşenleri – R01010010

+0

, sadece dizi kullanın: '[base.button, platform.button]' – sodik

cevap

5

'...', aynı adı taşıyan herhangi değişkenleri son örneği tarafından yazılır uyarılmalıdır.

İşte küçük bir demo uygulaması göstermek için:

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

8

çok yakın şunlardır:

const baseStyles = [baseStyle, platformStyle]; 

temelde herhangi bir bileşen böyle stilleri basamakla:

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

Evet, ancak yalnızca stili destekliyorlarsa, örneğin bir textAlign ayarladıysam Görünüm öğesinde, kaskad olmayacak. – R01010010

+1

Günümü kurtardın. {...} ile birleştirme, aynı bileşendeki stillere izin vermez. Doğru yaklaşım göstermiş olman. –