天天看点

react native 学习之模仿”探探“实现豆瓣电影app部分功能

一、 首先配置环境 当然是node 下用npm  

然后创建项目

在电脑上启动的安卓虚拟机 不能摇一摇,所以还需要在 cmd 里输入  

react native 学习之模仿”探探“实现豆瓣电影app部分功能

在笔记本下启动的虚拟机会比较卡可以设置如下,会稍微好点 

react native 学习之模仿”探探“实现豆瓣电影app部分功能

二、需要实现的界面和功能如下

react native 学习之模仿”探探“实现豆瓣电影app部分功能
react native 学习之模仿”探探“实现豆瓣电影app部分功能

新建一个AppNavigator.js 文件 用于首页和详情页的跳转

index.android.js  首先展示首页

reactjs 写样式和传统的css 有一定的区别,驼峰和没有简写如(margin: 0 auto) 是没有的,同时安卓机下是不能显示出阴影的

首页中的  卡片布局如下

react native 学习之模仿”探探“实现豆瓣电影app部分功能

卡片滑动swipe 效果

首页抽屉效果 

react native 学习之模仿”探探“实现豆瓣电影app部分功能

以上所用插件我都有改动 符合demo的需求····

通过这次的demo学习对react 有进一步的认识与体会,

组件的生命周期

react native 学习之模仿”探探“实现豆瓣电影app部分功能

componentWillReceiveProps(nextProps){} 接收新的数据 

 shouldComponentUpdate(nextProps, nextState){ return  boo} 必须有返回值, 返回 false componentWillUpdate()不会被调用 render()也再不执行 ,这样根据需要可以禁止页面的更新。

react native事件捕获 

onStartShouldSetPanResponderCapture, onMoveShouldSetPanResponderCapture连个方法都有返回值, 返回true 时,事件就不再传递,被当前组件劫持并调用当前组件的onResponderStart或者onResponderRlase等

数据请求利用 facth 比传统ajax 更简洁 当然属于es6 的

 state 更新 用setState 当然也可以用 如

forceUpdate就是重新render。有变量不在state上,缺又想更新state,刷新render;或者state里的某个变量层次太深,更新的时候没有自动触发render。这些时候都可以手动调用forceUpdate自动触发render。

有需要合作的,可以加个好友

react native 学习之模仿”探探“实现豆瓣电影app部分功能