React-Native 之 项目实战(二)

前言

---

• 本文有配套视频，可以酌情观看。
• 文中内容因各人理解不同，可能会有所偏差，欢迎朋友们联系我。
• 文中所有内容仅供学习交流之用，不可用于商业用途，如因此引起的相关法律法规责任，与我无关。
• 如文中内容对您造成不便，烦请联系 277511806@qq.com 处理，谢谢。
• 转载麻烦注明出处，谢谢。

• 本篇资源：链接: https://pan.baidu.com/s/1i4HFmeT 密码: yy79

  • 源码托管到 github 上，需要源码的 点我下载，喜欢的话记得 Star，谢谢！

属性声明和属性确定

---

• 有朋友反馈这边 属性声明和属性确定 不了解，这边就来补充一下。

• 在 React-Native 创建的自定义组件是可以复用的，而开发过程中一个组件可能会由多个人同时开发或者多个人使用一个组件，为了让开发人员之间减少沟通成本，我们会对某些必要的属性进行属性声明，让使用的人知道需要传入什么！甚至有些需要传入但没有传入值的属性我们会进行警告处理！

• 这边先来看下 属性声明 的示例：

    static propTypes = {
        name:PropTypes.string,
        ID:PropTypes.number.isRequired,
    }

• 上面我们声明了 name 和 ID 两个属性，并且进行了属性的确认，其中，’isRequired’ 表示如果不传递这个属性，那么开发阶段中，系统会出现警告，让我们对其进行属性确认，也就是说是否为必须属性。

• 属性确认语法分为：

  • 属性为任何类型

      React.PropTypes.any
  

  • 属性是否是 JavaScript 基本类型

      React.PropTypes.array;
      React.PropTypes.func;
      React.PropTypes.bool;
      React.PropTypes.number;
      React.PropTypes.object;
      React.PropTypes.string;
  

  • 属性是某个 React 元素

      React.PropTypes.element;
  

  • 属性为几个特定的值

      React.PropTypes.oneOf(['value1', 'value2'])
  

  • 属性为指定类型中的一个

      React.PropTypes.oneOfType([
          React.PropTypes.node,
          React.PropTypes.number,
          React.PropTypes.string
      ])
  

  • 属性为可渲染的节点

      React.PropTypes.node;
  

  • 属性为某个指定类的实例

      React.PropTypes.instanceOf(NameOfClass);
  

  • 属性为指定类型的数组

      React.PropTypes.arrayOf(React.PropTypes.string)
  

  • 属性有一个指定的成员对象

      React.PropTypes..objectOf(React.PropTypes.number)
  

  • 属性是一个指定构成方式的对象

      React.PropTypes.shape({
          color:React.PropTypes.stirng,
          fontSize:React.PropTypes.number
      })
  

  • 属性默认值（当我们没有传递属性的时候使用）

      static defaultProps = {
          name:'苍井空'
      };
  

占位图

---

• 开发中，我们会有许多图片都是从网络进行请求的，但是，如果出现网络卡顿的情况，图片就会迟迟不出现，又或者有的并没有图片，这样图片就为空白状态；为了不让用户感觉太突兀影响用户体验，也为了视图整体性，一般我们会选择使用占位图先展示给用户看，等到图片加载完毕再将图片展示出来。

• 这边我们需要对cell内部进行一些处理。

     {/* 左边图片 */}
     <Image source={
   {
   uri:this.props.image === '' ? 'defaullt_thumb_83x83' : this.props.image}} style={styles.imageStyle} />

无数据情况处理

---

• 还是网络问题，在网络出现问题或者无法加载数据的时候，一般我们会展示空白页，在空白页中提示 无数据 之类的提示，比较好的还会使用 指示器 的方式告诉用户网络出现问题等等。

• 这边我们做以下处理，当无数据时，我们就先初始化基础界面，然后展示 提示 页面，等到有数据时，再重新渲染数据。

• 首先设置 无数据 页面

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

    export default class GDNoDataView extends Component {
   

        render() {
            return(
                <View style={styles.container}>
                    <Text style={styles.textStyle}>无数据  </Text>