ReactNative学习笔记(六)之重新组织应用的样式

前言

接上一篇ReactNative学习笔记(五)之ListView继续学习ReactNative

组织应用的样式

我们创建的应用不可能把所有的东西都放在一个文件里面, 我们可以按照自己的想法去组织一下应用的代码.
首先我们想办法把样式分离出来, 放到另一个文件当中.
在根目录下建立一个文件夹app, 然后在app文件夹下建立一个Styles文件夹, 在Styles文件夹中建立一个叫做Main.js的js文件

然后将App.js中styles相关的代码剪切进来, 然后需要注意的是用到了StyleSheet.create这句代码所以StyleSheet这个包是也是需要导进来的, 所以Main.js的完整代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

import {StyleSheet} from 'react-native';

let styles = StyleSheet.create({
redText: {
color: '#db2828',
fontSize: 15,
},
itemMeta: {
fontSize: 16,
color: 'rgba(0, 0, 0, 0.6)',
marginBottom: 6,
},
itemHeader: {
fontSize: 18,
fontFamily: 'Helvetica Neue',
fontWeight: '300',
color: '#6435c9',
marginBottom: 6,
},
itemContent: {
flex: 1, // 大概就是weight的意思吧, 占剩下面积的100%, 否则flex就是stretch, 会把里面的text组件的宽度伸展开来,
// 一行中的文字太多的话会跑到外面去, 可以将这个flex: 1注释掉看一下效果就知道了
marginLeft: 13,
marginTop: 6,
},
item: {
flexDirection: 'row',
borderBottomWidth: 1,
borderColor: 'rgba(100, 53, 201, 0.1)',
paddingBottom: 6,
marginBottom: 6,
flex: 1, // todo 这里的flex等于1到底有什么用
},
loading: {
flex: 1, // todo 这里的flex等于1到底有什么用
justifyContent: 'center',
alignItems: 'center',
},
overlay: {
backgroundColor: 'rgba(0, 0, 0, 0.1)',
alignItems: 'center',
},
overlayHeader: {
fontSize: 33,
fontFamily: 'Helvetica Neue',
fontWeight: '200',
color: '#eae7ff',
padding: 10,
},
overlaySubHeader: {
fontSize: 16,
fontFamily: 'Helvetica Neue',
fontWeight: '200',
color: '#eae7ff',
padding: 10,
paddingTop: 0,
},
backgroundImage: {
flex: 1,
resizeMode: 'cover', // contain, stretch(拉伸)
},
image: {
width: 99,
height: 138,
margin: 6,
},
itemOne: {
alignSelf: 'stretch', // stretch: 伸展、张开
},
itemTwo: {
alignSelf: 'flex-end',
},
itemThree: {
// alignSelf: 'flex-end',
// flex: 2,
},
itemText: {
fontSize: 33,
fontFamily: 'Helvetica Neue',
fontWeight: '200',
color: '#6435c9',
padding: 30,
},
container: {
// justifyContent: 'space- around',
// alignItems: 'flex-start',
flexDirection: 'row',
backgroundColor: '#eae7ff',
flex: 1, // 占满全屏
paddingTop: 23,
}
});

export {styles as default}; // 注意这里的styles是上面的let styles

最后记得将这个styles变量导出, 语法就是export { xxx as default}, 这个xxx就是在文件中定义的变量styles

然后我们需要在App.js文件中导入这个样式

1
import styles from './app/Styles/Main';

app文件夹和App.js文件在同一层级目录, 所以用./app/xxx/, 然后再一层层去引用到Main.js文件, ./表示当前文件所在的目录, 而../就表示当前文件的上级目录

运行效果


成功的跑了起来, 样式也是对的, 说明代码重构成功!

0%