React-Native中关于样式的良好实践

react-native中的样式

react-native中，所有的代码文件都是由一个个的js(x)文件构成，样式也是一样，也是js代码来描述，准确的来说，是StyleSheet模块。

写样式，必须引入StyleSheet模块。

import { StyleSheet } from 'react-native';

react-native中，描述样式不是使用class来描述，而是用style来描述。示例如下：

<Text style={{color:'red'}}>我是中国人</Text>

style中有两个大括号，但是在react语法中，一般使用一个大括号，这是为什么？

其实很好理解：style样式中，外面的大括号属于react语法范畴，代表着里面存放着一个变量或者常量，而里面的大括号属于数据的范畴，代表着一个对象。

基于react-native这样的样式表达方式，react-native提供了StyleSheet模块用来让我们像css一样的写样式，只不过稍微有点区别。

const styles = StyleSheet.create({    colorRed:{        color:'red',    },    baseFont:{        fontSize:'22',        color:'#555555'    }})

这样，就用对象的方式描述了样式表。然后我们这样使用这个样式表。

<Text style={styles.colorRed}>我是mapbar_front</Text>

但是有时候，我们像像class那样，一次性写多个类，在react-native中就是添加多个描述样式的对象。

<Text style={[styles.colorRed,styles.baseFont]}>我是mapbar_front</Text>

也就是说，我们可以用数组的方式，解析样式，如果后面的样式重写了前面的样式，会进行覆盖。

react-native中处理样式的适配问题

一般而言，react-native处理的宽度和高度是具体的数字，但是不同屏幕的手机，他们的宽高是不能用量化的数字来表示。

react-native中的处理方式是这样的。获取屏幕的宽和高，然后以屏幕的宽度除以720，得到一个基准值baseFontSize。每次描述宽高的时候，我们都用一个数字乘以baseFontSize。这样其实相当于我们自己对每种屏幕的手机，划分了自己的宽度的基本单元。

import {Dimensions} from 'react-native';const {width, height} = Dimensions.get('screen');const baseFontSize = width / 720;

使用的时候，类似于这样

const fontSize = {    base: baseFontSize,    navTitle: baseFontSize * 36,  //导航标题};

样式的最佳实践

一般而言，我们写样式的时候，最好写一个公共的样式表，使用的时候引入。公共样式应该遵循的规则

1、功能单一
功能单一讲究的是，一个公共样式对象，只描述一种或者一类的东西。比如，我们定制按钮的样式，分为不同大小的按钮。只负责描述它的width、height。对它的背景色、字体大小、颜色等不去关注。

small_btn{    width: 60 * baseFontSize,    height: 20 * baseFontSize}base_btn{    width: 90 * baseFontSize,    height: 30 * baseFontSize}big_btn{    width: 120 * baseFontSize,    height: 40 * baseFontSize}

这样，我们在订制按钮的时候，引入不同的大小的样式。这样，不影响引入其他的样式，同样大小的按钮，我们可以给其他不同的背景色等。

2、集合度高

集合度高的意思就是某些样式，我们不用写入单一的功能，因为这类的样式在项目中使用频率够高。比如常见的居中问题。

.center{    display: flex,    alignItem: center,    justifyContent: center}

比如顶部的导航栏样式如下：

topBaner{    width: 720 * baseFontSize,    height: 50 * baseFontSize,    color: white,    backgroundColor: '#3c78ff'}

这些样式不仅仅描述的是某种单一的“属性”，如宽高等，还描述了如字体颜色、背景色等等一系列属性。

3、使用频率高

这是公共样式的必须属性，如果使用的频率不高，也就没必要写进去了。