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%