6. Bug Fix以及前期总结

修复1个简单bug,在Android手机里因为有Back按键,所有需要特殊处理,直接贴代码如下: 修改app/navigation/index.js添加如下代码

componentWillMount() {
    if (Platform.OS === 'android') {
      BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
    }
  }

  componentWillUnmount() {
    if (Platform.OS === 'android') {
      BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
    }
  }

  onBackAndroid = () => { return Actions.pop()}

其实就是绑定一个事件处理而已,如果应用原生Nav的话,一般要在pop的时候判断栈长度是否为0也即是否在首页,不然会错处,原生Android返回键是退出应用。另外这里的Platform.OS不判断也可以的,以为IOS实现为空,无所谓的,这里写出来只是顺便介绍Platform

另外修改了部分代码以实现分页查找: 修改了app/home/index.js

render() {
    const {isFetching, movies} = this.props;

    if (isFetching && !movies.subjects) {
      return <Loading />
    }

    this.state.data = this.state.data.concat(movies.subjects)

    return (        
        <ListView dataSource={this.state.dataSource.cloneWithRows(this.state.data)} renderRow={this._renderRow.bind(this)}
          enableEmptySections={true}
          onEndReached={this._handleLoadMore.bind(this)} 
          onEndReachedThreshold={10}
          initialListSize={2}
          refreshControl={
            <RefreshControl
              refreshing={isFetching}
              onRefresh={this._onRefresh.bind(this)}
              color="#8CD790"
            />
          }
          renderFooter={() => this.props.hasMore ? <LoadMore active={this.props.isFetching}/> : null }
          renderHeader={() => {
            return (
              <View style={styles.listViewTitle}>
                  <Text>{movies.title}</Text>
              </View>
            )
          }}
        />        
    );
  }

添加下拉刷新refreshControl组件以及上拉加载下一页:

onEndReached={this._handleLoadMore.bind(this)} 
onEndReachedThreshold={10}
//对应如下函数
_onRefresh() {
    // 刷新
    const {dispatch} = this.props;
    this.state.data = [];
    dispatch(fetchMovies())
  }
  _handleLoadMore() {
    // 加载更多
    if (this.props.hasMore) {
      const {dispatch, movies} = this.props;
      let start = movies.start + movies.count;
      dispatch(fetchMovies(start))
    }
    
  }

app/home/reducer.js

export function moviesReducer (
    state={
        isFetching: true,
        hasMore: true,
        movies: {}
    }, action
) {
    switch (action.type) {
        case REQUEST_MOVIES:
            
            return Object.assign({}, state, {
                isFetching: true,
            })
        case RECEIVE_MOVIES:
            const {movies} = action;
            return Object.assign({}, state, {
                movies: action.movies,
                isFetching: action.isFetching,
                hasMore: (movies.start + movies.count) < movies.total
            })
        default: 
            return state
    }
}

简单处理了一下,不够严格,请依据实际业务自行修改。

还存在一些bug,有时间在整吧。写到这里其实剩下的工作就很简单了,蓝图已画好,只需要根据需要的颜色按需涂上即可,先根据自己的业务分解action,定义constant,分发函数reducer,组件渲染然后connectstore,写style,ok一个功能完成,就是这么简单。 另外如果组件页面变多,功能比较复杂,其实还可以优化,从前面的代码也可以看出,很多代码其实都是相似的,这里这么写只是可以更好的了解redux,程序员当然是最懒的那一类人了,github上还有很多组件可以节省代码时间,比如redux-actionshttps://github.com/acdlite/redux-actions可以生成具有一定规范的action,这样就可以节省很多代码了,诸如此类就不一一举例了。 最后不要忘了test,测试用例还是要写的,不要以为像这样分割的代码就不好测试了,应用了redux之后写测试反而会变得简单了,因为都是函数,各种js测试工具都是可以用的,比如mock等等,github上有很多测试第三方组件,搜一搜就是了。redux的另一特点就是可以时间旅行,比如可以回溯state重新测试、还可以在state里添加时间描述来测试性能,可以recordstate时间流来进行压力测试等等。(其实我没有实践过,不对的话当我瞎说。。)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Linux驱动

25.Linux-Nor Flash驱动(详解)

1.nor硬件介绍: ? 从原理图中我们能看到NOR FLASH有地址线,有数据线,它和我们的SDRAM接口相似,能直接读取数据,但是不能像SDRAM直接写入数...

32760
来自专栏代码世界

Python中的logger和handler到底是个什么鬼

最近的任务经常涉及到日志的记录,特意去又学了一遍logging的记录方法。跟java一样,python的日志记录也是比较繁琐的一件事,在写一条记录之前,要写好多...

34590
来自专栏张善友的专栏

RESTful API 设计最佳实践

背景 目前互联网上充斥着大量的关于RESTful API(为了方便,以后API和RESTful API 一个意思)如何设计的文章,然而却没有一个”万能“的设计...

42480
来自专栏算法修养

javaWeb项目(SSH框架+AJAX+百度地图API+Oracle数据库+MyEclipse+Tomcat)之一 基础Struts框架搭建篇

即将开始着手写这个项目,所以希望通过这篇博客来记录自己学习的过程 今天开学第一天,就上了软件工程实践课,自己也开始着手做这个大作业了。首先我的项目名称叫做智能班...

43090
来自专栏青蛙要fly的专栏

Android技能树 — 网络小结(4)之socket/websocket/webservice

介于自己的网络方面知识烂的一塌糊涂,所以准备写相关网络的文章,但是考虑全部写在一篇太长了,所以分开写,希望大家能仔细看,最好可以指出我的错误,让我也能纠正。

11630
来自专栏Golang语言社区

Go微服务 - 构建我们的第一个服务

虽然通过HTTP提供JSON服务不是内部服务和外部服务的唯一选择,但本文聚焦的是HTTP和JSON. 使用RPC机制和二进制消息格式(例如Protocol Bu...

25740
来自专栏企鹅号快讯

JDBC编程

前面我们已经讨论了数据库的安装和简单的使用,还没完成的可以先去Mysql的安装和Mysql数据库的简单操作回顾一下哦!今天我们来简单学习JDBC编程的准备和链...

35480
来自专栏Golang语言社区

go语言最快最好运用最广的web框架比较(大多数人不了解的特性)

如果你为自己设计一个小应用程序,你可能不需要一个Web框架,但如果你正在进行生产,那么你肯定需要一个,一个好的应用程序。

63340
来自专栏13blog.site

小测试

可以在 @RequestMapping 注解里面加上 method=RequestMethod.GET 或者使用 @GetMapping 注解

21110
来自专栏Golang语言社区

让事件飞 ——Linux eventfd 原理与实践

目前越来越多的应用程序采用事件驱动的方式实现功能,如何高效地利用系统资源实现通知的管理和送达就愈发变得重要起来。在Linux系统中,eventfd是一个用来通知...

1.7K30

扫码关注云+社区

领取腾讯云代金券