異なるコンポーネントの異なるスタイルファイル

Question

私は反応ネイティブを学習していて、問題が発生しました。私はチュートリアルシリーズに従っていますが、何かを見逃している可能性があります。私はさまざまなコンポーネントの異なるスタイルファイルを使用しようとしていますが、スタイルは適用されないようです。ここ
は、コードスニペットである：

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

スタイル/ global.js

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

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

スタイル/ 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' 
    } 
}); 

インデックスまたは単一スタイルファイル内に置いたときのスタイルが働きます。

Answer 1

を：：

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

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

module.exports = global; 

コミュニティとFacebookがチェックアウトし、あなたのコンポーネントのスタイリングをお勧めしますどのように大きな例えば

および

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

React Nativeでコンポーネントスタイルを使用する典型的な方法は、StyleSheetsの作成をコンポーネント自体に保存することです.CSSを使用してWeb上で使用する場合とは別のファイルではありません。そうすれば、コンポーネント、構造、およびスタイルに関するすべてが同じファイルにあります。

グローバルスタイルシートを使用して、必要に応じてこれらのスタイルをプルすることはできますが、コンポーネントにはコンポーネントスタイルを保持できます。私はあなたの例を試してみたし、このパターンでJSファイルを使用する場合、それは動作しますhttp://makeitopen.com/