Verschiedene Style-Dateien für verschiedene Komponenten

Question

Ich lerne reagieren-native und haben ein Problem. Ich folge einer Tutorialserie, habe aber vielleicht etwas verpasst. Ich versuche, verschiedene Stildateien für verschiedene Komponenten zu verwenden, aber die Stile scheinen nicht zu gelten.
Hier ist der Ausschnitt aus dem Code:

index.ios.js

import React, { 
    AppRegistry, 
    Component, 
    Text, 
    View, 
    StatusBar 
} from 'react-native'; 

StatusBar.setBarStyle('light-content'); 

class iTunesBrowser extends Component { 
    render() { 
    return (
     <View style={styles.global.mainContainer} > 
     <View style={styles.navbar.appearance}> 
     <View style={styles.navbar.button} ></View> 
      <Text style={styles.navbar.title}>iTunesBrowser</Text> 
      <Text style={styles.navbar.button} >Search</Text> 
     </View> 

     <View style={styles.global.content}> 
      <Text> Some Text </Text> 
     </View> 
     </View> 
    ); 
    } 
} 

import styles from './styles'; 

AppRegistry.registerComponent('iTunesBrowser',() => iTunesBrowser); 

styles.js

export default { 
    global: require('./styles/global'), 
    navbar: require('./styles/navbar') 
}; 

styles/Global.js

import React, {StyleSheet} from 'react-native'; 

export default StyleSheet.create({ 
    mainContainer: { 
    flex: 1 
    }, 
    content: { 
    flex: 1, 
    backgroundColor: '#ccc' 
    } 
}); 

styles/navbar.js

import React, {StyleSheet} from 'react-native'; 

export default StyleSheet.create({ 
    appearance: { 
    backgroundColor: '#003333', 
    paddingTop: 30, 
    paddingBottom: 10, 
    flexDirection: 'row' 
    }, 
    title: { 
    color: '#FFFFFF', 
    textAlign: 'center', 
    fontWeight: 'bold', 
    flex: 1 
    }, 
    button: { 
    width: 50, 
    color: '#FEFEFE', 
    textAlign: 'center' 
    } 
}); 

Die Stile auf dem Index oder in einer einzigen Stil-Datei, wenn setzen arbeiten.

Answer 1

Ich habe Ihr Beispiel ausprobiert und es funktioniert, wenn Sie JS verwenden, um Dateien mit diesem Muster:

import React, {StyleSheet} from 'react-native'; 

var global = StyleSheet.create({ 
    mainContainer: { 
     flex: 1 
    }, 
    content: { 
     flex: 1, 
     backgroundColor: '#ccc' 
    } 
}); 

module.exports = global; 

und

import React, {StyleSheet} from 'react-native'; 

var navbar = StyleSheet.create({ 
    appearance: { 
     backgroundColor: '#003333', 
     paddingTop: 30, 
     paddingBottom: 10, 
     flexDirection: 'row' 
    }, 
    title: { 
     color: '#FFFFFF', 
     textAlign: 'center', 
     fontWeight: 'bold', 
     flex: 1 
    }, 
    button: { 
     width: 50, 
     color: '#FEFEFE', 
     textAlign: 'center' 
    } 
}); 

module.exports = navbar; 

Answer 2

Der typische Weg, mit Komponentenstilen in React Native zu arbeiten, besteht darin, die Erstellung Ihrer StyleSheets in den Komponenten selbst zu behalten, nicht in separaten Dateien, wie Sie es im Web mit CSS gewohnt sind. Auf diese Weise ist alles über die Komponente, die Struktur und den Stil in der gleichen Datei.

Sie können immer noch ein globales Stylesheet verwenden und diese Stile bei Bedarf abrufen, aber Komponentenstile in der Komponente behalten.

Für ein gutes Beispiel, wie die Gemeinschaft und Facebook empfehlen Ihre Komponenten Styling check out: http://makeitopen.com/