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

我已经尝试过您的示例，当您使用具有此模式的JS文件时它会起作用：

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

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

module.exports = global;

和

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，而不是像在Web上使用CSS那样在单独的文件中创建。这样，关于组件，结构和样式的所有内容都在同一个文件中。

您仍然可以拥有全局样式表，并在需要时提取这些样式，但在Component中保留Component样式。

有关社区和Facebook如何推荐您的组件样式的一个很好的例子，请查看：http://makeitopen.com/

不同组件的不同样式文件

2 个答案: