React Native学习笔记（5）--ReactNative阶段综合项目--购物车

React 学习笔记

一、购物车

1、实现内容

（1）商品展示页：

• 将商店的商品以每行两列的方式进行加载展示
• 数量超出屏幕时使用滚动条进行滚动查看
• 商品展示页展示商品的图片信息，商品规格，价格
• 点击商品图标可以将商品加入到购物车
• 同一商品多次点击时增加购物车中该商品的数量，不增加商品类型数量
• 商品展示页有结算按钮，点击可以进入购物车结算界面

（2）购物车页面：

• 购物车以一行一列的方式显示当前购物车的商品
• 每一行分成五个部分，第一部分显示商品图标，第二部分可以动态编辑商品的数量，第三部分显示当前该商品的单价，第四部分显示当前该商品的总价，第五部分为一个删除按钮，可以从购物车删除该商品
• 购物车商品列表的下方的一行分为2部分，第一展示当前购物车所以商品的总价和，第二部分为一个结算按钮，点击结算按钮提示结算成功，成功后清空购物车
• 购物车最下方一行为一个行按钮，该按钮为清空购物车按钮，点击按钮弹出确认弹框，点击确认后清空列表，否则直接关闭弹框

（3）导航栏：

• 采用固定导航栏，导航栏分为左中右三部分
• 左边为返回按钮，显示返回箭头和上一页面的名称，如果为第一页则不显示箭头和名称
• 中间部分显示当前页面标题
• 右边按钮不显示

2、涉及组件

• Image 图标组件
• TouchableOpacity 点击透明按钮组件
• Text 文本显示组件
• TextInput 输入框组件
• View 视图组件
• AsyncStorage 全局存储属性
• StyleSheet 样式组件
• ScrollView 滚动视图组件
• Navigator 导航栏组件

3、实现过程中遇到的问题

• 1、在实现商品展示列表的过程中，在商品图片下方显示商品名称和规格时对Flex布局有点模糊，通过调试可以理解，组件的Flex布局方向影响子组件，组件的Flex属性设置当前组件在其父组件之中的占用百分比。当遇到父子组件布局方向水平垂直混合时可以使用View进行父子组件分离，然后再进行布局。
• 2、对于Navigator的返回后退不会触发React组件的重新渲染更新，可以在进行导航传递时将前一页面所需的刷新方法传递到下一页面，在下一页面中按需调用。
• 3、在进行React组件生成时，尽量保证View与Controller的分离，保证View组件的视图功能单一化，从而最大化进行组件重用。

5、代码路径

代码路径：https://github.com/JasonLiuMeng/ShoppingCart

6、项目截图