我正在学习反应原生并且遇到了问题。我遵循了教程系列,但可能错过了一些东西。我试图为不同的组件使用不同的样式文件,但样式似乎并不适用。
以下是代码片段:
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'
}
});
当放在索引或单个样式文件中时,样式会起作用。
答案 0 :(得分:3)
我已经尝试过您的示例,当您使用具有此模式的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;
答案 1 :(得分:1)
在React Native中使用组件样式的典型方法是在组件本身中创建StyleSheets,而不是像在Web上使用CSS那样在单独的文件中创建。这样,关于组件,结构和样式的所有内容都在同一个文件中。
您仍然可以拥有全局样式表,并在需要时提取这些样式,但在Component中保留Component样式。
有关社区和Facebook如何推荐您的组件样式的一个很好的例子,请查看:http://makeitopen.com/