04.基础-组件和商品详情

知识点：
1.使用路由跳转内页
2.开发完整的商品详情页
3.弹出选择数量

前面的代码已经加入git仓库，链接地址。讲项目放在本地的同学也可以试着将代码放到仓库里。这个地方可以使用单独的分支合并到master，也可以直接覆盖带master分支。

为了能够更直观的看到每次提交的代码，我尽量把每一节的内容都做一次提交，备注也会写的非常清楚.另外我也会不定时的增加各种注释到代码里。一般情况只需要切换到不同的提交时间点即可看到当时使用的代码了。

添加页面和跳转

在src目录下添加一个新的目录detail，用来放新加入的详情页。新建goods.js，并写几行简单的代码。
enter image description here

在src下的index.js中，将新建的页面加入到路由里。
enter image description here

这样新建的详情页就加入了路由管理，只要在需要跳转的时候执行传入路由的名字就可以了。这里改造home页，将几个地方的跳转改成刚才的路由名称就可以了。
enter image description here

点击商品就会发现已经可以跳转到详情页了，但是现在详情页什么都没有。同时也不能返回到上一页。
enter image description here

自定义顶部

在src下新建一个component目录，用来存放头部组件以及以后会用到的一些其他组件。将组件抽成一个公用的组件是一个非常明智的方法，它会让你省下很多的时间。最好的做法就是做一个兼容很多情况的组件，然后使用继承的方法做一些参数的重载。
enter image description here

改造这个组件，让ios的顶部和安卓的顶部高度一致，把ios顶部的系统组件露出来。默认情况下ios顶部在小图标下面，安卓则有一个系统的顶部横条，小图标不影响正常的界面。
enter image description here

顶部组件默认有一个中间的标题，下面再加一个默认的左侧返回键。返回键使用的是路由组件的gobanck方法。右侧给一个自定义右侧按钮的方法。
enter image description here

把这个自定义组件放在详情页，然后给一个title值。一个简单的顶部组件就做完了。
enter image description here

刷新页面看效果，点击一下返回键，看看是不是可以用了。
enter image description here

详情页顶部

上半部分包括头图和几个属性介绍。

详情页的所有内容使用ScrollView包裹。这是一个比较简单的列表组件，使用非常方便。在列表不长的情况下请尽量使用这个组件。
enter image description here

将路由传进来的参数保存在组件的变量里。由于传入的参数有2个，所有这个地方使用了2个变量，同时后面做判断的时候也要判断2次。
enter image description here

在组件初始化之后调用接口，将接口返回的数据存入组件的state中。这里注意把state中的变量提前写好，减少不必要的bug。
enter image description here

在最上面添加一个商品图片，然后接着添加价格等信息。
enter image description here

到这里，详情页的简单信息就实现了。后面再添加一个详细的商品信息就可以了。
enter image description here

这里需要注意的是,接口返回的图片有大有小，这里做了一个处理,图片太大的话就缩小一些。
enter image description here

最终效果和正常的电商APP就很相似了。如果有特殊的样式还可以再自己调整。
enter image description here

上面的开发完成之后图片是同时加载的，导致有时候上部分的图片显示延迟，后面优化的时候会优化这种情况。

购买和加入购物车

展示的界面有了，下面再加上加入购物车、购买等按钮就可以了。

按钮要求悬浮在界面的最下方，所以要将这几个按钮放在ScrollView的后面。放在里面虽然也可以做到，但是非常不推荐，这样会增加渲染难度。
enter image description here

这里有3个按钮，分别是购物车、立即购买和分享商品。
enter image description here

购买弹出层

点击立即购买按钮不会直接跳转到下单页，这里会弹出一个简单的选择数量的页面。在RN中如果需要使用这样的一个层就需要用Modal组件来做。Modal在RN中是一个单独的view层，默认覆盖在所有的页面上面。
enter image description here

这里设置Modal不使用默认的动画、全完透明，给onRequestClose添加一个默认的方法，不然会在手机上报错。

首先给Modal加一个内容层。这一层的主要作用是自己做遮罩的样式。这里是一个半透明的黑色遮罩。内部加一层点击区域，效果等于再点击黑色透明层的时候能够关掉弹出层。

 <View style={SpecificationsStyle.warp}>
      <TouchableOpacity 
      activeOpacity={0.9}
      style={{ width: px(750), flex: 1 }} 
      onPress={() => this.setState({ priceBoxStatus: false })}></TouchableOpacity>
</View>

接下来开始写商品简略信息，包括商品小图、价格。
enter image description here

下面再加一层用来放选择商品数量和购买按钮。
enter image description here

最后把几个事件实现一下。

//购买方法
   openbuy() {
       this.setState({ priceBoxStatus: true })
   }
   //数量减少
   reduce() {
       if (this.state.buyNumber == 1) return;
       let buyNumber = Number(this.state.buyNumber) || 2;
       if (isNaN(buyNumber)) buyNumber = 2;
       this.setState({ buyNumber: --buyNumber })
   }
   //改数量
   changeNumber(num) {
       num = Number(num);
       if (isNaN(num)) num = 1;
       if (num > this.state.limitStock) {
           num = 1
           toast(`库存不足`);
       }
       this.setState({
           buyNumber: num
       });
   }
   //增加数量
   plus() {
       if (this.state.isBuyLimit == 1 && this.state.buyNumber >= this.state.buyLimitNum) {
           toast(`该商品为限购商品,${this.state.buyLimitMsg}`);
           return;
       }
       if (this.state.buyNumber >= this.state.limitStock) {
           toast(`库存仅剩${this.state.limitStock}件`);
           return;
       }
       let qty = this.state.buyNumber || 1;
       if (isNaN(qty)) qty = 1;
       this.setState({
           buyNumber: ++qty
       })
   }

最终效果如图。点击立即购买按钮即可弹出这一个弹出层。弹出层可以选择数量，默认保持数量为1，受库存以及最大可选择的数量影响。也可以直接点击按钮跳转到购买页。
enter image description here