5. ListView应用

ListView大概是所有移动应用都会用到的组件了,大部分都在首页,这章结合redux来看如何从API取数据再到如何应用redux更新渲染组件ListView


书写redux模式的异步请求API
  • 新建app/comon/api.js,这里随便找的豆瓣电影的API做测试用,API接口详情请查看
'use strict'

const ApiHost = 'http://api.douban.com/v2/movie'

export default {
    comming: `${ApiHost}/coming_soon`
}
  • 新建app/home/constant.js,action常量
export const REQUEST_MOVIES = 'request_movies';
export const RECEIVE_MOVIES = 'receive_movies';
  • 新建app/home/action.js,action一般在这里请求API做数据封装
'use strict'

import Api from '../common/api'
import Util from '../common/util'

import {
    REQUEST_MOVIES, RECEIVE_MOVIES
} from './constant';

export function fetchMovies() {
    return dispatch => {
        // dispatch(fetchMovies())
        fetch(Api.comming).then(ret => ret.json()).then((ret) => {
            dispatch(receiveMovies(ret))
        })
    }
}

function fetchingMovies() {
    return {
        type: REQUEST_MOVIES,
        isFetching: true,
    }
}

function receiveMovies(ret) {
    console.log('receive:',ret)
    return {
        type: RECEIVE_MOVIES,
        isFetching: false,
        movies: ret
    }
}

可以看出只是在调用异步fetchdispatch我们真正要处理的函数,这样就可以延迟函数做到异步,这里尤其要注意fetchMovies函数是同步的,如果要异步执行,把fetch返回即可,这里没有是以为没有必要,什么时候返回异步取决于你的业务以及你的state的设计。

  • 新建app/home/reducer.js,分发action
'use strict'

import {
    REQUEST_MOVIES, RECEIVE_MOVIES
} from './constant'

export function moviesReducer (
    state={
        isFetching: true,
        movies: {},
    }, action
) {
    switch (action.type) {
        case REQUEST_MOVIES:
            
            return Object.assign({}, state, {
                isFetching: true,
            })
        case RECEIVE_MOVIES:
            return Object.assign({}, state, {
                movies: action.movies,
                isFetching: action.isFetching
            })
        default: 
            return state
    }
}

初始化state里有2个属性,isFetching表示正在请求数据,此时应在主页面显示loadingmovies是请求API获得的数据,方法体就是一个普通的switch函数,不是一定要这样写,只要能正确处理返回即可,只有2点要求,修改state时一定不能修改原来的state,而是要返回新的,这里使用了Object.assign()函数方便处理,也可以使用ES语法新特性{...};另外一定要保证default时返回旧的state即可。

  • 修改app/reducer.js,将新的reducer连接到主干上
import { combineReducers } from 'redux';
import route from './route';
import {moviesReducer} from './home/reducer';

export default appReducers = combineReducers({
    route,
    moviesReducer,
    // other reducer
})
  • 修改app/home/index.js,主要逻辑调用
import React, {
  PropTypes,
} from 'react';

import {
  View,
  ScrollView,
  Text,
  Image,
  ListView,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';

import {connect} from 'react-redux'
import {Actions} from 'react-native-router-flux'

import {fetchMovies} from './action'
import Loading from '../components/loading'
import Util from '../common/util'

class Home extends React.Component {
  constructor(props) {
    super(props);

    let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  
    this.state = {
      dataSource: ds
    };
  }
  componentDidMount() {
    const {dispatch} = this.props;
    dispatch(fetchMovies())
  }
  render() {
    console.log('render:',this.props)
    const {isFetching, movies} = this.props;

    if (isFetching) {
      return <Loading />
    }

    return (
      
      <ScrollView>
        <View style={styles.listViewTitle}>
          <Text>{movies.title}</Text>
        </View>
        <ListView dataSource={this.state.dataSource.cloneWithRows(movies.subjects)} renderRow={this._renderRow.bind(this)}
          enableEmptySections={true}
          bounces={false}
          showsVerticalScrollIndicator={false}/>        
      </ScrollView>
    );
  }
  _renderRow(row) {
    const directors = row.directors;
    return (
      <TouchableOpacity style={styles.movieItem} onPress={() => Actions.detail({url: row.alt})}>
          <View style={styles.movieAvatar}>
            <Image source={{uri: row.images.large}} style={styles.avatarImage}/>
          </View>
          <View style={styles.movieInfo}>
            <Text style={styles.movieTitle}>{row.original_title}</Text>
            <Text>{row.genres.join(',')}</Text>
            <Text>{row.pubdates}</Text>
            <Text>导演:</Text>
            {directors.map((v, key) => {return (<Text key={key}>{v.name}</Text>)})}
            <Text style={{marginTop: 12}}>主演:</Text>
            <Text>{row.casts.map((v, key) => {return v.name}).join('/')}</Text>
          </View>
      </TouchableOpacity>
    )
  }
}

Home.propTypes = {};

Home.defaultProps = {};

const styles = StyleSheet.create({
  outerContainer: {
        flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    },
  listViewTitle: {
    flex: 1,
    alignItems: 'center',
  },
  movieItem: {
    padding: 12,
    flex: 2,
    flexDirection: 'row',
  },
  avatarImage: {
    width: Util.window.width/2 - 15,
    height: Util.window.height/3,
  },
  movieInfo: {
    paddingLeft: 12,
  },
  movieTitle: {
    fontSize: 18,
    color: '#8CD790',
    width: Util.window.width/2 -12,
    marginBottom: 15,
  }
})

function mapStateToProps(state) {
  return {
    ...state.moviesReducer
  }
}

export default connect(mapStateToProps)(Home)

这里需要注意的地方比较多:

  1. 调用action要使用dispatch
  2. const {isFetching, movies} = this.props;这个虽然在代码里没有显示声明,这是redux帮我们注入的
  3. ListViewdataSource要使用clone,这就像写C语言,不能随意修改指针一样的道理
  4. connect函数是redux提供的关键函数,详细请参考官方文档mapStateToProps的返回即redux需要注入的state,是要公开的属性,取决于你的state结构的设计,比如这里的dataSource由于是在组件内部使用,就没必要暴露给外界了
  5. 点击某个电影条目跳转到详情,为了简便起见,这里直接新建了一个detail.js内部使用WebView直接显示网页,实际效果图:

Screenshot_20160626-131807.png

Screenshot_20160626-132125.png

github代码地址v0.0.3

todo:添加Android手机Back事件

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 4. Navigation实战

    本来想写一个应用redux的Navigation实战,但是发现react-native有又新的更新,新手怕误导大家,就直接用了别人的组件,看看怎么应用吧。本次在...

    MasterVin
  • 6. Bug Fix以及前期总结

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

    MasterVin
  • 5. spring-boot REST 全局异常处理

    单页应用越来越多以及移动化之后,服务化已经是老生常谈了,在前文代码的基础上做些简单的通用模块的处理,后端返回结果的不一致性真的会给前端带来很大的麻烦,故此为止:

    MasterVin
  • react实战:umi问卷发布系统

    技术团队中,保持技术分享和持续的学习是完全必要的。企业主会说:"公司不是培训机构。"这固然正确。但一个公司,总会遇到这种或那种需要攻关的难题。当你不愿意分享解决...

    一粒小麦
  • java中\n\r的区别 原

    回车”(Carriage Return)和“换行”(Line Feed)这两个概念的来历和区别。  在计算机还没有出现之 前,有一种叫做电传打字机(Telet...

    wuweixiang
  • 安全科普:SQLi Labs 指南(Part 3)

    Freebuf上有两篇SQLi Labs的教程安全科普:SQLi Labs 指南 Part 1和安全科普:SQLi Labs 指南 Part 2。这两篇教程只讲...

    FB客服
  • 送书 | 别泡枸杞,别晒步数!7招搞懂健康数据,有型有颜等TA来撩

    导读:你的日常活动正在产生大量数据!但其中很多数据也正在被你浪费。你以为数据与健康的关系,就是在朋友圈里晒晒步数?其实,并不需要复杂的技术,这些数据就可以帮你完...

    华章科技
  • Meteor 1.6.x + Ant Design Table + recompose 实现数据分页效果

    我与梦想有个约会
  • Meteor 1.6.x + Ant Design Table + recompose 实现数据分页效果

    我与梦想有个约会
  • react+redux+webpack教程4

    接着上回新闻搜索的例子。现在我们要通过路由进入一个新的页面来查看新闻详细内容。 react和路由并没有什么直接关系,用什么路由都可以。不过使用react-rou...

    前朝楚水

扫码关注云+社区

领取腾讯云代金券