React Native开发实用技巧
原创文章，转载请注明出处
简书：https://www.jianshu.com/u/0e668742d9a2
代码规范篇
JavaScript是否需要使用分号？
我的回答是：不需要分号。
这个是讨论很火的一个话题。我刚从Objective-C转到JavaScript的时候，很不习惯省略分号。但是没过多久，我就把项目里所有的分号全部去掉了。原因很简单，明明是可以省去的工作量，同时又不会造成不良影响的事情。为什么不去省呢？
就像Objective-C刚推出ARC（自动内存回收）的时候，很多“老人”觉得ARC不放心，坚持要使用MRC（手动内存回收）。我猜想现在还在坚持使用MRC的人，可能不到1%了吧。
代码的缩进，使用4个空格，还是2个空格？
我的回答是：2个空格。
跟上面一样，我刚转到JavaScript的时候，觉得2个空格很反人类，太挤了。所以一直坚持4个空格。直到UI代码慢慢变多，嵌套变深。。。我才开始慢慢怀疑自己。前几天，我搜索了多个热门的JavaScript开源项目，无一例外使用的是2个空格。所以，我果断把代码改成2个空格。
更多代码规范，可以参考这里Airbnb React/JSX Style Guide
UI布局篇
如何根据不同屏幕尺寸，做等比例布局？
美工出标注图的时候，通常是按照屏幕宽度750出的。如果需求是UI根据不同屏幕尺寸，做等比例的缩放。我们可以写一个叫px2dp的公共方法
import {Dimensions} from 'react-native'
const basePixelWidth = 750
const px2dp = (px: number): number => {
return px * Dimensions.get('window').width / basePixelWidth
}
比如要设置View的宽度为屏幕的一半。就可以这样：
<View style={{width: px2dp(375)}} />
如何快速获取屏幕宽高？
常见的做法，是通过react native提供的Dimensions获取
const screenWidth = Dimensions.get('window').width
const screenHeight = Dimensions.get('window').height
我们可以做一个简单的封装，创建一个screen.js文件
import {Dimensions, PixelRatio} from 'react-native'
const screenWidth = Dimensions.get('window').width
const screenHeight = Dimensions.get('window').height
let screen = {
width: screenWidth,
height: screenHeight,
}
export default screen
然后在外部，就可以通过screen.width或者screen.height获取宽高了。
如何判断设备是iPhoneX？
我们有时候需要对iPhoneX的异形屏做一些特殊的适配，就需要判断一个设备是否是iPhoneX
import {Platform, Dimensions} from 'react-native'
const isIphoneX = () => {
let dimen = Dimensions.get('window')
return (
Platform.OS === 'ios' &&
!Platform.isPad &&
!Platform.isTVOS &&
(dimen.height === 812 || dimen.width === 812)
)
}
如果你比较爱偷懒，可以顺便再封装几个方法
// 判断是否是iOS设备
const isIOS = () => {
return Platform.OS === 'ios'
}
// 是否是Android设备
const isAndroid = () => {
return Platform.OS === 'android'
}
// 状态栏的高度
const statusBarHeight = () => (isIOS() ? (isIphoneX() ? 44 : 20) : 0)
如何优雅的为每个页面增加Loading页、错误页？
很多App大部分页面都需要用到Loading页。如果数据获取失败，还需要显示错误页，告诉用户错误原因，并且让用户点击重试。这时候，我们可以定义一个通用的组件叫Scene，然后在这个类中，定义Loading页面和错误页。使用的时候，只需要在我们的component这样实现
render() {
let {isLoading, error} = this.state
return (
<Scene
isLoading={isLoading}
error={error}
onRetry={this.requestData}
>
...
</Scene>
)
}
当我们需要请求网络的时候，把isLoading设置为true。这样Scene组件就会为我们展示一个Loading页面。
当网络请求失败的时候，把isLoading设置为false，error设置为具体的错误信息。Scene组件就会显示一个错误页，并且有一个“重试”按钮。用户点击“重试”后，会调用onRetry回调。
Scene的代码简化后，大概是这样
type Props = {
isLoading?: boolean,
error?: ?string,
onRetry?: Function,
children?: any,
style?: Object,
}
class Scene extends PureComponent<Props> {
render() {
let {isLoading, style, error, children, onRetry} = this.props
return (
<View style={[styles.container, style]}>
{!isLoading && children}
<ErrorView text={error} onPress={onRetry} />
<LoadingView isLoading={isLoading} />
</View>
)
}
}
这里需要注意的是，ErrorView、LoadingView需要使用下面这种绝对布局。否则可能会被页面的内容顶到屏幕外面。
{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}
我们还可以给Scene增加其他的功能，比如一个通用的HUD，空数据页面等等。
做布局的时候，需要用到大量的style，这些style我要写在哪里呢？
首先，我强烈反对把所有的style放在一个文件中。这对维护来说是一个噩梦。我喜欢把每个component特有的style，放在该component所在的文件中。比如下面的container样式是Scene这个组件独有的，就可以直接写在Scene中。
class Scene extends PureComponent<{}> {
render() {
return (
<View style={styles.container}>
...
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Colors.paper,
marginTop:20,
},
})
如果是多个页面都需要用到的style，这时候考虑两种情况。
第一，如果这个style非常非常通用，比如一个分隔线的样式。那么优先考虑单独抽出一个分割线的类，比如这样
class Separator extends PureComponent<{}> {
render() {
return (
<View style={styles.separator} />
)
}
}
const styles = StyleSheet.create({
separator: {
height: StyleSheet.hairlineWidth,
backgroundColor: Colors.line,
}
})
第二，如果这个style只是在部分页面中出现。那么可以创建一个styles.js文件，在里面定义通用的样式，比如：
let styles = StyleSheet.create({
border: {
borderWidth: StyleSheet.hairlineWidth,
borderColor: Colors.border,
},
line: {
height: StyleSheet.hairlineWidth,
backgroundColor: Colors.line,
},
fillParent: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
list: {
marginHorizontal: px(34),
marginTop: px(38),
borderWidth: StyleSheet.hairlineWidth,
borderColor: Colors.border,
borderRadius: 3,
shadowColor: 'black',
shadowOffset: {
width: 2,
height: 2,
},
shadowOpacity: 0.07,
shadowRadius: 2,
},
// ...
}
export default styles
Flow篇
flow是什么？
flow是有facebook推出的JavaScript静态类型检查工具。弱类型语言有个很大的问题，就是一些类型错误引起的bug，可能产品上线后才会被发现。导致很多事故的发生。
flow很好的解决了JavaScript弱类型引发的一系列问题。对于习惯了强类型语言的我来说，只有借助flow这种类型检查工具，才能找到安全感。这里不对flow的用法进行详细的介绍。只是说一下一些使用的技巧。具体的使用可以查看官方网站
我的项目是否需要flow？
可能有人会问：我的项目很小，只有我一个人开发。而且我对自己的编码能力很有自信。那么我是否需要使用flow呢？
我认为，如果你是一个刚刚接触React Native的新手，对很多东西还不了解。那么我建议你可以先把flow放在一边。
如果你接触React Native已经有一段时间，已经可以开发一个简单的页面了。那么，我强烈建议你学习下flow。刚开始使用flow的时候，可能会增加一定的工作量。但是当flow替你找出代码里一个又一个潜在问题的时候，你会庆幸你使用了flow。而不是等到代码上线后bug才被发现。
如何优雅的定义props和state？
比如这样一个复选框的控件
image.png
它需要外部传入标题。那么可以定义一个叫title的prop，它是string类型的：
class Checkbox extends PureComponent<{title:string}> {
....
}
当然，我更喜欢这样定义：
type Props = {
title: string,
}
class Checkbox extends PureComponent<Props> {
因为如果需要传入的属性非常多，使用第一种方式的话，可读性就会大打折扣。
复选框控件还需要一个叫做checked的state，表示是否是选中状态：
class Checkbox extends PureComponent<{title:string},{checked:boolean}> {
// ...
}
同样，我更喜欢在外部定义：
type Props = {
title: string,
}
type State = {
checked: boolean,
}
class Checkbox extends PureComponent<Props, State> {
// ...
}
这里props是必须定义的，而State是可选的。所以如果你的组件不需要接收props，可以这么写：
class Checkbox extends PureComponent<{}> {
// ...
}
具体props和state的定义，可以查看官方文档
如何定义redux的state类型？
定义state的方式跟定义其他普通的对象一样
type State = {
users: Array<{
id: string,
name: string,
age: number,
phoneNumber: string,
}>,
activeUserID: string,
// ...
};
或者这样
type User = {
id: string,
name: string,
age: number,
phoneNumber: string,
}
type State = {
users: Array<User>,
activeUserID: string,
// ...
}
如何定义redux的action类型？
我们项目中肯定不止只用一个action，所以需要使用连接符，把多个action类型合并起来
type FooAction = { type: "FOO", foo: number }
type BarAction = { type: "BAR", bar: boolean }
type Action =
| FooAction
| BarAction
定义redux的state是很有必要的。因为你需要经常回过头查看state的结构。至于action嘛。。。在小项目中，可以暂时用Object或者any敷衍一下。
如何定义redux的reducer类型？
reducer使用到了我们刚才定义的state和action类型
function reducer(state: State, action: Action): State {
// ...
}
如果你比较喜欢用箭头函数：
const reducer = (state: State, action: Action): State => {
// ...
}
常用UI控件库推荐
react-native-elements
目前我所知道的，star数量最多的控件库
teaset
国内的优秀控件库
react-native-ui-lib
目前我正在使用的控件库，由国外的wix团队负责开发。
各个控件库的对比，以及UI Lib具体的使用，可以参考我另一篇文章
最灵活的UI控件库：React Native UI Lib
ReactNative开发者交流群
如果你也热爱React Native开发，欢迎加入我们QQ群，一起学习讨论
ReactNative开发者群二维码
更多
如果想要了解更多React Native的实战技巧，欢迎观看本人刚推出的《ReactNative实战-美团》视频教程，本课程的案例来自我的开源项目高仿美团。
课程基于React Native 0.52.0，从创建工程讲起，一步一步编写代码，直至完成整个项目。
腾讯课堂
网易课堂
最后
今天是2月14情人节，我因为数月前骑电动车光荣负伤，至今出不了门。
谨以此文献给我的太太，情人节快乐 :)
