ReactNative进阶（四十五）：自定义组件

太过爱你忘了你带给我的痛 2022-10-12 01:37 249阅读 0赞

### 文章目录 ###

*   *  一、前言
     *  二、参数传递
     *  三、示例
     *   *  3.2 LinearLayout 组件
         *  3.2 列表展示
     *  四、拓展阅读

--------------------

## 一、前言 ##

`ReactNative`组件分为类组件和函数组件。

实现`ReactNative`自定义组件基本流程如下：

> 1.  组件需要实现什么效果;
> 2.  组件基本逻辑是怎样的；
> 3.  继承`Component`或`PureComponent`实现`render()`方法;
> 4.  定义组件属性字段及其类型，以及是否必须，如不必须则默认字段值是什么;
> 5.  绑定点击或者触摸等事件方法，执行前需要判空;
> 6.  注册、调用。

## 二、参数传递 ##

![在这里插入图片描述][f8bc4752da8a43969857cf7e27b4b7a8.png]  
`React Native`版本升级很快，已经升级到`0.60.3`，在新版本环境下运行老项目会有一些问题，常见的就是参数属性校验错误的问题。例如：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70][]  
造成上面错误的原因是随着`React Native`的升级，新版本废弃了很多东西，过去我们可以直接使用 `React.PropTypes` 来进行属性校验，不过这个属性自 `React v15.5` 起就被移除了，转而使用`prop-types`库来进行替换。

子组件接收父组件传参过程中，可以通过`propTypes`校验参数类型。

`PropTypes`提供了许多验证工具，用来帮助开发者确定`props`数据的有效性。在下面的示例中，我们使用了`PropTypes.stirng`。用以说明name的值类型应该是`string`。 当`Component`的`props`接收到一个无效值时，浏览器控制台就会输出一个警告， 控制台会出现如下警告：  
![在这里插入图片描述][fcdf8467100b4086933121709d416be0.png]

static propTypes = { 
      Greeting: PropTypes.string,
      gravity: PropTypes.string,
    }

处于性能原因考虑，类型检查仅在开发模式下进行。

从软件工程角度考量，可将校验规则封装一起，定义一套校验工具。示例如下：

import React from 'react';
    import PropTypes from 'prop-types';
    
    class PropValidatorComponent extends React.Component { 
      render() { 
       }
    }
    
    PropValidatorComponent.propTypes = { 
    //可以定义一个属性是特定的JS类型（Array,Boolean,Function,Number,Object,String,Symbol）。默认情况下，这些都是可选的。
    
    optionalArray: PropTypes.array,
    optionalBool: PropTypes.bool,
    optionalFunc: PropTypes.func,
    optionalNumber: PropTypes.number,
    optionalObject: PropTypes.object,
    optionalString: PropTypes.string,
    optionalSymbol: PropTypes.symbol,
    
    //指定类型为：任何可以被渲染的元素，包括数字，字符串，react 元素，数组，fragment。
    optionalNode: PropTypes.node,
    
    // 指定类型为：一个react元素
    optionalElement: PropTypes.element,
    
    //可以定义类型为某个类的实例，这里使用JS的instanceOf操作符实现
    optionalMessage: PropTypes.instanceOf(Message),
    
    //指定枚举类型：你可以把属性限制在某些特定值之内
    optionalEnum: PropTypes.oneOf(['News', 'Photos']),
    
    // 指定多个类型：也可以把属性类型限制在某些指定的类型范围内
    optionalUnion: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
      PropTypes.instanceOf(Message)
    ]),
    
    // 指定某个类型的数组
    optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
    
    // 指定类型为对象，且对象属性值是特定的类型
    optionalObjectOf: PropTypes.objectOf(PropTypes.number),
    
    //指定类型为对象，且可以规定哪些属性必须有，哪些属性可以没有
    optionalObjectWithShape: PropTypes.shape({ 
      optionalProperty: PropTypes.string,
      requiredProperty: PropTypes.number.isRequired
    }),
    
    // 指定类型为对象，且可以指定对象的哪些属性必须有，哪些属性可以没有。如果出现没有定义的属性，会出现警告。
    //下面的代码optionalObjectWithStrictShape的属性值为对象，但是对象的属性最多有两个，optionalProperty 和 requiredProperty。
    //出现第三个属性，控制台出现警告。
    optionalObjectWithStrictShape: PropTypes.exact({ 
      optionalProperty: PropTypes.string,
      requiredProperty: PropTypes.number.isRequired
    }),
    
    //加上isReqired限制，可以指定某个属性必须提供，如果没有出现警告。
    requiredFunc: PropTypes.func.isRequired,
    requiredAny: PropTypes.any.isRequired,
    
    // 也可以指定一个自定义的验证器。如果验证不通过，它应该返回Error对象，而不是`console.warn `或抛出错误。`oneOfType`中不起作用。
    customProp: function(props, propName, componentName) { 
      if (!/matchme/.test(props[propName])) { 
        return new Error(
          'Invalid prop `' + propName + '` supplied to' +
          ' `' + componentName + '`. Validation failed.'
        );
      }
    },
    
    //也可以提供一个自定义的验证器 arrayOf和objectOf。如果验证失败，它应该返回一个Error对象。
    //验证器用来验证数组或对象的每个值。验证器的前两个参数是数组或对象本身，还有对应的key。
    customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { 
      if (!/matchme/.test(propValue[key])) { 
        return new Error(
          'Invalid prop `' + propFullName + '` supplied to' +
          ' `' + componentName + '`. Validation failed.'
        );
      }
    })

使用时，父组件通过属性名作为子组件参数形式传递，子组件通过`props`属性接收参数值，并可以通过设置默认值。

// ES6
    class Greeting extends React.Component { 
      static defaultProps = { 
        name: 'stranger'
      }
      render() { 
        return (
          <div>Hello, { this.props.name}</div>
        )
      }
    }

## 三、示例 ##

### 3.2 LinearLayout 组件 ###

import React, {  PureComponent } from 'react';
    import {  View, StyleSheet } from 'react-native';
    import PropTypes from 'prop-types';
    
    export default class LinearLayout extends PureComponent { 
      static propTypes = { 
        orientation: PropTypes.string,
        gravity: PropTypes.string,
      }
      static defaultProps = { 
        orientation: 'vertical',
        gravity: undefined,
      }
      render() { 
        return(
          <View style={ { 
            flexDirection: (this.props.orientation === 'horizontal') ? 'row' : 'column'
          }}>
            { this.props.children}
          </View>
        )
      }
    }

**组件引用**：

import LinearLayout from './LinearLayout';
    <LinearLayout orientation={ this.state.orientation}>
       <Text>ChildComponent</Text>
     </LinearLayout>

### 3.2 列表展示 ###

下面以封装`FlatList`展示列表信息，实现自定义组件。

/** ListView 使用说明 * extraData：数据变动会不会重新渲染列表 * * data：为数据源 * onLoading：上拉回调 * isLoading：上拉加载中 * hasMore：是否有更多数据 * hint：提醒用户文字 * isRefresh：下拉刷新中 * onRefresh：下拉刷新回调 * renderItem：item界面布局 */
    import React from 'react';
    import {  StyleSheet, FlatList, View, Text, Image, ActivityIndicator, RefreshControl, Dimensions } from 'react-native';
    import {  Images } from '../../../constant/Images';
    
    const {  width, height } = Dimensions.get('window'); //获取手机的宽和高
    
    export default (props) => (
      <FlatList
        testID={ props.testID}
        data={ props.data}
        style={ props.style || {  flex: 1 }}
        refreshControl={ 
          <RefreshControl
            onRefresh={ props.isLoading ? null : props.onRefresh}
            refreshing={ !props.isLoading && props.isRefresh}
            colors={ props.colors || ['#108EE9', '#00FF00', '#FF0000']}
          />
        }
        numColumns={ props.numColumns || 1}
        extraData={ props.extraData}
        renderItem={ props.renderItem}
        keyExtractor={ (_, index) => `${ index}`}
        indicatorStyle={ props.indicatorStyle}
        ListEmptyComponent={ EmptyView(props)}
        ListFooterComponent={ FooterView(props)}
        ListHeaderComponent={ props.ListHeaderComponent && props.ListHeaderComponent()}
        showsVerticalScrollIndicator={ props.showIndicator}
        onEndReachedThreshold={ props.threshold || 0.1}
        onScroll={ props.onScroll}
        ItemSeparatorComponent={ props.ItemSeparatorComponent}
        onEndReached={ () => (props.isLoading || props.isRefresh || !props.hasMore ? null : props.onLoading())}
      />
    );
    
    // 数据为空是的视图
    const EmptyView = (props) =>
      props.isLoading || props.isRefresh ? null : (
        <View style={ styles.emptyLayout}>
          <Image style={ styles.icon} source={ props.icon || showIcon(props.hint)} />
          <Text style={ styles.hint} onPress={ hintLoad(props.hint) ? props.hintCallback || props.onLoading : null}>
            { props.hint || '没有查询到数据'}
          </Text>
        </View>
      );
    
    // 列表底部视图
    const FooterView = (props) =>
      props.isRefresh || (!props.isLoading && props.data.length == 0) ? null : (
        <View style={ styles.footerLayout}>
          { props.isLoading ? <ActivityIndicator style={ styles.indicator} color="#aaa" size="small" /> : null}
          <Text style={ styles.loadText} onPress={ hintLoad(props.hint) ? props.hintCallback : null}>
            { props.hint || (props.hasMore || props.isLoading ? '加载中...' : '没有更多数据！')}
          </Text>
        </View>
      );
    
    // 判断显示图片
    function showIcon(msg) { 
      if (msg == null || msg.indexOf('没有查询到数据') > 0 || msg.indexOf('数据为空') > 0) { 
        return Images.nomes;
      } else if (msg.indexOf('超时') > 0) { 
        return Images.nomes;
      } else if (msg.indexOf('异常') > 0) { 
        return Images.nomes;
      }
      return Images.nomes;
    }
    
    // 判断点击重新加载的条件
    function hintLoad(msg) { 
      return msg == null || msg.indexOf('异常') > 0 || msg.indexOf('失败') > 0 || msg.indexOf('超时') > 0;
    }
    
    const styles = StyleSheet.create({ 
      emptyLayout: { 
        // marginTop: 96,
        marginTop: Math.floor(height / 4),
        alignItems: 'center',
        justifyContent: 'center',
      },
      icon: { 
        width: 128,
        height: 128,
        resizeMode: 'contain',
      },
      hint: { 
        color: '#666666',
        fontSize: 14,
      },
      footerLayout: { 
        minHeight: 38,
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'center',
        marginBottom: 20,
      },
      indicator: { 
        marginRight: 8,
      },
      loadText: { 
        color: '#999',
        fontSize: 14,
      },
    });

**组件引用**：

import {  ListView } from './ListView.js';
     <ListView
       data={ bloc.getCity()}
       numColumns={ 2}
       hasMore={ false}
       isLoading={ true}
       onRefresh={ _onRefreshEvent}
       // onLoading={_onLoadEvent}
       renderItem={ sectionItems}
       isLoading={ false}
       style={ { marginTop: 10}}
     />

## 四、拓展阅读 ##

*  《[ReactNative进阶（十六）：组件生命周期][ReactNative]》
 *  《[ReactNative进阶（二十六）：父子组件函数调用][ReactNative 1]》
 *  《[ReactNative进阶（三十）：Component、PureComponent 解析][ReactNative_Component_PureComponent]》
 *  《ReactNative进阶（四十六）：页面跳转及传参》
 *  《[Vue进阶（九十四）：自定义组件][Vue]》

[f8bc4752da8a43969857cf7e27b4b7a8.png]: /images/20221005/8c7bafeb98124defa573bacf74c59dff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]: /images/20221005/f76d62dd05284820be43e0b7a813333d.png
[fcdf8467100b4086933121709d416be0.png]: /images/20221005/8835bca17cba4912a59e59d52088166f.png
[ReactNative]: https://shq5785.blog.csdn.net/article/details/116525730
[ReactNative 1]: https://shq5785.blog.csdn.net/article/details/116943164
[ReactNative_Component_PureComponent]: https://shq5785.blog.csdn.net/article/details/117032817
[Vue]: https://shq5785.blog.csdn.net/article/details/104051253