reactNative基础2

发表于 | 分类于 ， |

StyleSheet

  • 所有RN中的样式都必须用这个Api创建
  • 所有样式名称都必须是驼峰命名
  • RN中所有的组件默认display属性都是flex，而且主轴方向是column
  • 每个元素可以通过数组设置多种样式，如果遇到相同的样式，后面样式的优先级大于前面
1
2
3
4
5
6
7
8
const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
});

盒子模型

在RN中的元素同样拥有盒子模型：宽高、内边距、边框、外边距。

需要注意在RN中的样式大小不需要单位，同时没有css的复合样式，比如border、background、font，在RN中border宽度、颜色、圆角等样式需要一个一个设置，background和font也一样。

关于padding与margin，在css中可以赋予多个值来设置四边不一样的大小，在RN中只能给定一个值，指定相同的大小，如果四边大小不一样，就需要按照方向一个一个设置。同时RN也提供了paddingHorizontal、marginHorizontal、paddingVertical、marginVertical同时设置左右和上下两个方向的值。

另外补充一下，在设置字体时，Android内建的有这么几个: normal、serif、monospace

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
import React, { Component } from "react";
import { StyleSheet, View, Text } from "react-native";
export default class StyleBoxTest extends Component {
    render() {
        return (
            <View style={styles.container}>
                {/* 通过margin和父盒子产生距离 */}
                <View style={styles.box}>
                    {/* 文本受到了父盒子padding的影响 */}
                    <Text>内容</Text>
                </View>
            </View>
        );
    }
}

let styles = StyleSheet.create({
    container: {
        width: 500,
        height: 500,
        backgroundColor: "blue"
    },
    box: {
        width: 300,
        height: 300,
        paddingHorizontal: 10,
        paddingVertical: 80,
        backgroundColor: "red",
        borderWidth: 10,
        borderRadius: 10,
        borderColor: "yellow",
        margin: 30,
        marginLeft: 50
    }
});

弹性布局

ReactNative中组件默认采用flex弹性布局，使用flex可以使其在可利用的空间中动态地扩张或收缩，
ReactNative中的flex工作原理和web上的CSS基本一致，当然也存在少许差异。首先是默认值不同：flexDirection的默认值是column而不是row，而flex也只能指定一个数字值。

主轴方向

采用flex弹性布局的容器，子元素有横纵两种排列方式，在ReactNative中默认是纵向的，也就是说默认元素呈纵向排列，如果有需要也可以通过flexDireaction样式进行修改。

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
export default class FlexDirectionTest extends Component {
    render() {
        return (
            <View>
                {/* 默认情况下元素纵向排列 */}
                <View>
                    <View><Text>123</Text></View>
                    <View><Text>456</Text></View>
                </View>
                {/* 改为横向排列 */}
                <View style={styles.row}>
                    <View><Text>123</Text></View>
                    <View><Text>456</Text></View>
                </View>
            </View>
        );
    }
}

let styles = StyleSheet.create({
    row: {
        // flexDirection: row row-reverse column column-reverse
        flexDirection: "row",
    }
});

弹性宽高

一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大。

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
export default class FlexSizeTest extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.one}></View>
                <View style={styles.two}></View>
                <View style={styles.three}></View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    // 父容器必须有大小子元素才能分配宽高
    container: {
        flex: 1,
    },
    one: {
        flex: 1,
        backgroundColor: "red"
    },
    two: {
        flex: 2,
        backgroundColor: "green"
    },
    three: {
        flex: 3,
        backgroundColor: "blue"
    }
});

弹性宽高补充

组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。

在一个组件中，如果父容器设置方向为纵，那么子元素必须设置高度或flex占比，否则盒子无大小。

在一个组件中，如果父容器设置方向为横，那么子元素必须设置宽度或flex占比，否则盒子无大小。

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
export default class FlexSize2Test extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.one}></View>
                <View style={styles.two}></View>
                <View style={styles.three}>
                    <View style={styles.threeOne}></View>
                    <View style={styles.threeTwo}></View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "row"
    },
    // 如果父容器设置方向为横，那么子元素必须设置宽度或flex，否则盒子无大小
    one: {
        flex: 1,
        backgroundColor: "red"
    },
    two: {
        width: 200,
        backgroundColor: "green"
    },
    three: {
        flex: 3,
        backgroundColor: "blue",
    },
    // 如果父容器设置方向为纵，那么子元素必须设置高度或flex占比，否则盒子无大小。
    threeOne: {
        flex: 1,
        backgroundColor: "yellow"
    },
    threeTwo: {
        height: 300,
        backgroundColor: "orange"
    }
});
分享