ReactNative学习笔记(二)之常用样式

发表于 | 分类于

前言

接上一篇ReactNative学习笔记(一)之建立项目并在Android和iOS设备上运行

常见样式

首先我们看看ReactNative初始化好之后原始的App.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
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

现在版本的ReactNative初始化好的项目已经默认是es6语法了.
现在我们把render函数里return里的东西都删了, 然后把styles也删了, 重写这个View的style, 例如像这个样子

1
2
3
4
5
6
7
8
9
export default class App extends Component<Props> {
    render() {
        return (
            <View style={{backgroundColor: '#eae7ff', height: 300}}>
                <Text style={styles.title}>mundane</Text>
            </View>
        );
    }
}

运行效果

但是通常我们一般都不会直接把style直接写在View的标签里面, 会把这个style抽取出来, 便于修改和复用.
定义一个styles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let styles = StyleSheet.create({
    container: {
        backgroundColor: '#eae7ff',
        flex: 1, //占满全屏
        margin: 30,
        borderWidth: 1,
        borderColor: '#6435c9',
        borderRadius: 16,
        shadowColor: '#6435c9',
        shadowOpacity: 0.6, // 阴影的不透明度, 0到1之间
        shadowRadius: 2,
        shadowOffset: {
            height: 1,
            width: 0
        }
    }
});

然后替换掉之前的style

1
2
3
4
5
6
7
8
9
export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.title}>mundane</Text>
            </View>
        );
    }
}

而文字的样式我们也可以设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let styles = StyleSheet.create({
    title: {
        fontSize: 26,
        color: '#000000',
        textAlign: 'center',
        fontStyle: 'italic', // 斜体字
        letterSpacing: 2, // 字间距
        lineHeight: 33, // 行间距
        fontFamily: 'Courier', // 字体名字, 如'Courier', 'Helvetica Neue'
        fontWeight: 'bold', // 文字粗细, 如'bold'(加粗)或者数字, 最粗900, 最细100
        textDecorationLine: 'line-through', // 'line-through'(删除线), 'underline'(下划线)
        textDecorationStyle: 'dashed' // 'solid'(实线), 'double'(双实线), 'dotted'(点线), 'dashed'(虚线)
    },
});

然后我们在View元素里面添加一个Text的元素, 并应用我们刚才写的文字的style

1
2
3
4
5
6
7
8
9
export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.title}>mundane</Text>
            </View>
        );
    }
}

效果:

0%