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

    常用第三方SDK推荐

    全部亲测可用的第三方SDK

    SDK Github地址
    热更新 react-native-code-push
    极光推送 jpush-react-native
    QQ SDK react-native-qqsdk
    微信SDK react-native-wechat
    支付宝 react-native-yunpeng-alipay
    高德地图 react-native-amap3d
    Talking Data react-native-talkingdata
    友盟统计 rn-umeng

    ReactNative开发者交流群

    如果你也热爱React Native开发,欢迎加入我们QQ群,一起学习讨论
    ReactNative开发者群二维码.png

    更多

    如果想要了解更多React Native的实战技巧,欢迎观看本人刚推出的《ReactNative实战-美团》视频教程,本课程的案例来自我的开源项目高仿美团
    课程基于React Native 0.52.0,从创建工程讲起,一步一步编写代码,直至完成整个项目。
    网易课堂
    腾讯课堂

    最后

    今天是2月14情人节,我因为数月前骑电动车光荣负伤,至今出不了门。
    谨以此文献给我的太太,情人节快乐 :)


Log in to reply