react-native 的資料傳遞是父類傳遞給子類，子類通過this.props.** 讀取資料，這樣會造成元件多重巢狀，於是用redux可以更好的解決了資料和介面View之間的關係， 當然用到的是react-redux,是對redux的一種封裝。

react基礎的概念包括：

1.action是純宣告式的資料結構，只提供事件的所有要素，不提供邏輯，同時儘量減少在 action 中傳遞的資料

2. reducer是一個匹配函式，action的傳送是全域性的，所有的reducer都可以捕捉到並匹配與自己相關與否，相關就拿走action中的要素進行邏輯處理，修改store中的狀態，不相關就不對state做處理原樣返回。reducer裡就是判斷語句

3.Store 就是把以上兩個聯絡到一起的物件，Redux 應用只有一個單一的 store。當需要拆分資料處理邏輯時，你應該使用reducer組合 而不是建立多個 store。

4.Provider是一個普通元件，可以作為頂層app的分發點，它只需要store屬性就可以了。它會將state分發給所有被connect的元件，不管它在哪裡，被巢狀多少層

5.connect一個科裡化函式，意思是先接受兩個引數（資料繫結mapStateToProps和事件綁mapDispatchToProps）再接受一個引數（將要繫結的元件本身）。mapStateToProps：構建好Redux系統的時候，它會被自動初始化，但是你的React元件並不知道它的存在，因此你需要分揀出你需要的Redux狀態，所以你需要繫結一個函式，它的引數是state，簡單返回你需要的資料，元件裡讀取還是用this.props.*

6.container只做component容器和props繫結， 負責輸入顯示出來，component通過使用者的要互動呼叫action這樣就完整的流程就如此

來張圖

流程如上，那麼結構如下。

需要實現的效果如下, 頂部 一個輪播，下面listview，底部導航切換，資料來源豆瓣電影

程式入口

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';

import App from './app/app';

export default class movies extends Component {
    render() {
      return(
        <App/>
      );
    }
}


AppRegistry.registerComponent('moives', () => moives)
 

store 和資料初始化

/**
 * @author ling
 * @email [email protected]
 * @create date 2017-05-17 10:38:09
 * @modify date 2017-05-17 10:38:09
 * @desc [description]
*/
import { createStore, applyMiddleware, compose  } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk'
import React, { Component } from 'react';
import Root from './containers/root';
import allReducers from './reducers/allReducers';
import { initHotshow, fetchLoading } from './actions/hotshow-action';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const store = createStoreWithMiddleware(allReducers);
//初始化 進入等待 首屏資料 ajax請求
store.dispatch(fetchLoading(true));

class App extends Component {

	constructor(props) {
        super(props);
    }

	render() {
		return (
			<Provider store={ store }>
				<Root/>
			</Provider>
		);
	}
}

module.exports = App;

action純函式，同時把action type單獨寫出來。在action同目錄下檔案types.js

/**
 * @author ling
 * @email [email protected]
 * @create date 2017-05-17 10:36:44
 * @modify date 2017-05-17 10:36:44
 * @desc [description]
*/
'use strict';

//首頁 正在上映
export const HOTSHOW_BANNER = 'HOTSHOW_BANNER';
export const HOTSHOW_LIST = 'HOTSHOW_LIST';
export const HOTSHOW_FETCH = 'HOTSHOW_FETCH';
export const ADDMORE = 'AddMORE';

hotshow-action.js

/**
 * @author ling
 * @email [email protected]
 * @create date 2017-05-12 04:56:43
 * @modify date 2017-05-12 04:56:43
 * @desc [description]
*/
import { HOTSHOW_BANNER, HOTSHOW_LIST, HOTSHOW_FETCH, ADDMORE } from './types';
import { hotshowFetch } from '../middleware/index-api';


export const addBanner = (data) => {
	return {
		type: HOTSHOW_BANNER,
		data
	}
}
//載入等待，true 顯示 反之
export const fetchLoading = (bool) => {
	return {
		type: HOTSHOW_FETCH,
		bool
	}
}


export const addList = (data) => {
	return {
		type: HOTSHOW_LIST,
		data
	}
}

// 正在熱映 初始請求
export const initHotshow = () => {
	return hotshowFetch(addList);
}

allReducers.js 整合所有reducer

import { combineReducers } from 'redux';
import { HotShowList, Banner, fetchLoading } from './hotshow/reducers'

const allReducers = combineReducers({
	hotshows: HotShowList, // 首屏資料列表 listview
	banner: Banner, // 輪播
	fetchload: fetchLoading, //載入中boo
});

export default allReducers;

hotshowreducer

/**
 * @author ling
 * @email [email protected]
 * @create date 2017-05-12 04:56:34
 * @modify date 2017-05-12 04:56:34
 * @desc [description]
*/
import { HOTSHOW_BANNER, HOTSHOW_LIST, HOTSHOW_FETCH } from '../../actions/types';

export const HotShowList = (state = {}, action) => {
	switch (action.type) {
		case HOTSHOW_LIST:
			return Object.assign(
			{} , state , {
				data : action.data
			});
		default:
		return state;
	}
}

export const Banner = (state = {}, action) => {
	switch (action.type) {
		case HOTSHOW_BANNER:
			let subjects = action.data;
			let data = subjects.slice(0, 5);// 前五個
			return Object.assign(
			{} , state , {
				data : data
			}); 
		default:
		return state;
	}
}

export const fetchLoading = (state = {}, action) => {
	switch (action.type) {
		case HOTSHOW_FETCH:
			return Object.assign(
			{} , state , {
				data : action.bool
			});
		default:
		return state;
	}
}

api 資料請求

/**
 * @author ling
 * @email [email protected]
 * @create date 2017-05-16 08:34:36
 * @modify date 2017-05-16 08:34:36
 * @desc [description]
*/
//const hotshow = 'https://api.douban.com/v2/movie/in_theaters';
// const sonshow = 'https://api.douban.com/v2/movie/coming_soon';
// const usshow = 'https://api.douban.com/v2/movie/us_box';
// const nearcinemas = 'http://m.maoyan.com/cinemas.json';

const hotshow = 'http://192.168.×.9:8080/weixin/hotshow.json';
const sonshow = 'http://192.168.×.9:8080/weixin/sonshow.json';
const usshow = 'http://192.168.×.9:8080/weixin/usshow.json';
const nearcinemas = 'http://192.168.×.9:8080/weixin/nearcinemas.json';

import { initHotshow, fetchLoading } from '../actions/hotshow-action';

export function hotshowFetch(action) {
	return (dispatch) => {
		fetch(hotshow).then(res => res.json())
		.then(json => {
			dispatch(action(json));
			dispatch(fetchLoading(false));
		}).catch(msg => console.log('hotshowList-err  '+ msg));
	}
}

containers\hotshow\index

/**
 * @author ling
 * @email [email protected]
 * @create date 2017-05-17 10:44:56
 * @modify date 2017-05-17 10:44:56
 * @desc [description]
*/
import React, { Component } from 'react';
import { View, ScrollView }  from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { size } from '../../util/style';
import HotShowList from './hotshow-list';
import Loading from '../../compoments/comm/loading'
import { fetchLoading, initHotshow } from '../../actions/hotshow-action';

class hotshow extends Component {

	componentWillMount() {
		let _that = this;
		let time = setTimeout(function(){
			//請求資料
			_that.props.initHotshowAction();
			clearTimeout(time);
		}, 1500);
	}
	render() {
		return (<View >
				{this.props.fetchbool ? <Loading/> : <HotShowList/> }
			</View>);
	}
}
function mapStateToProps(state) {
    return {
        fetchbool: state.fetchload.data,
		hotshows: state.hotshows.data
    }
}
function macthDispatchToProps(dispatch) {
    return bindActionCreators({
		initHotshowAction: initHotshow,
	}, dispatch);
}
export default connect(mapStateToProps, macthDispatchToProps)(hotshow);

BannerCtn 輪播用的swiper 外掛， 但swiper加入 listview 有個bug就是圖片不顯示，結尾做答

import React, { Component } from 'react';
import { Text, StyleSheet, View, Image } from 'react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Swiper from 'react-native-swiper';
import { addBanner } from '../../actions/hotshow-action';
import { size } from '../../util/style';

class BannerCtn extends Component {
    
    render() {
        let data = this.props.banner.data;
        return (
            <View style={{height: 200}}>
            { data !== undefined ? 
                <Swiper height={200} autoplay={true}>
                    {
                        data.map((item, i) => {
                                return ( <View key={i} style={{flex: 1, height:200}}>
                                    <Image style={{flex: 1}}  resizeMode='cover'
                                    source={{uri: item.images.large}}/>
                                    <Text style={style.title}> {item.title} </Text>
                                </View>)
                        })
                    }
                </Swiper>: <Text>loading</Text>
            }
            </View>
        );
    }
}

function mapStateToProps(state) {
    return {
        banner: state.banner
    }
}

let style = StyleSheet.create({
    title: {
        position: 'absolute',
        width: size.width,
        bottom: 0,
        color: '#ffffff',
        textAlign: 'right',
        backgroundColor: 'rgba(230,69,51,0.25)'
    }
})

export default connect(mapStateToProps)(BannerCtn);

hotshow-list

import React, { Component } from 'react';
import { Text, View, ListView, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { addBanner } from '../../actions/hotshow-action';
import Loading from '../../compoments/comm/loading';
import Item from '../../compoments/hotshow/item';
import Banner from './banner-ctn';
import Foot from '../../compoments/comm/foot';

class HotShowList extends Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        //頂部輪播
        let { hotshows, bannerAction  } = this.props;
        let subs = hotshows.data.subjects;
        bannerAction(subs);
    }
    _renderList() {
        let { hotshows } = this.props;
        let ary = hotshows.data.subjects, subsAry = [], row=[];
        row.push(<Banner/>);
        for(let i = 0, item; item = ary[i++];) {
            //一行兩個
            subsAry.push(
                <Item key={i} rank={i} data={item}/>
            );
            if(subsAry.length == 2) {
                row.push(subsAry);
                subsAry = [];
            }
        }
        return row;
    }
    _renderRow(data) {
        return(
            <View style={{marginTop: 1, flexWrap:'wrap', flexDirection: 'row', justifyContent: 'space-between'}}>{data}</View>
        );
    }
	render() {
        let ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        });
        let data = this._renderList();
        
        this.state = {
            dataSource: ds.cloneWithRows(data),
        }
        //removeClippedSubviews 處理 banner 圖片不顯示
        return (
            <View>
                <View>
                    <ListView removeClippedSubviews={false} dataSource={this.state.dataSource}  renderRow={this._renderRow}/>
                </View>
                <Foot/>
           </View>
		);
    }
}

function mapStateToProps(state) {
    return {
        hotshows: state.hotshows
    }
}
function macthDispatchToProps(dispatch) {
    return bindActionCreators({ bannerAction: addBanner}, dispatch);
}
let style = StyleSheet.create({
    listbox: {
        marginBottom: 45,
    }
});

export default connect(mapStateToProps, macthDispatchToProps)(HotShowList);

剩下 便是foot tab 和單個item的編寫

/**
 * @author ling
 * @email [email protected]
 * @create date 2017-05-19 08:38:19
 * @modify date 2017-05-19 08:38:19
 * @desc [description]
*/
import React, { Component } from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';
import { size } from '../../util/style';

const width = size.width/2-0.2;

class item extends Component{
	render() {
		let data = this.props.data;
		return(
			<View style={style.box}>
				<Image resizeMode='cover' style={style.avatar} source={{uri:data.images.large}}/>
				<View style={style.rank}>
					<Text style={style.rankTxt}>Top{this.props.rank}</Text>
				</View>
				<View style={style.msgbox}>
					<View style={style.msgrow}>
						<Text style={style.msgrowl}>{data.title}</Text>
						<Text style={style.msgrowr}>評分:{data.rating.average}</Text>
					</View>
					<View style={style.msgrow}>
						<Text style={style.msgrowl}>
						{data.genres.map((item, i)=> {
							if(i > 1) return;
							i == 1 ? null : item += ',';
							return item;
						})}
						</Text>
						<Text style={style.msgrowr}>觀影人數:{data.collect_count}</Text>
					</View>
				</View>
			</View>
		);
	}
}

let style = StyleSheet.create({
	box: {
		width: width,
		paddingBottom: 1
	},
	avatar: {
		flex: 1,
		height: 260,
	},
	rank: {
		position: 'absolute',
		top: 0,
		left: 0,
        backgroundColor: 'rgba(255,164,51,0.6)',
        paddingVertical: 1,
        paddingHorizontal: 3,
		borderBottomRightRadius: 4
    },
	rankTxt: {
		fontSize: 12,
		color: '#ffffff'
	},
	msgbox: {
		position: 'absolute',
		bottom: 1,
		width: width,
		paddingHorizontal: 2,
		backgroundColor: 'rgba(230,69,51,0.5)',
	},
	msgrow: {
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'space-between',
	},
	msgrowl: {
		fontSize: 12,
		color: '#ffffff'
	},
	msgrowr: {
		fontSize: 13,
		color: '#ffffff'
	}
});

module.exports = item;

到此一個react-native 配合redux 程式設計首屏顯示就大體完成了，

Swiper Image 在ListView不顯示在，解決如下，測試手機微android 4.4.4，有把react-native升級為0.44.2 親測無效

    constructor(props) {
        super(props);
        this.state={
            visibleSwiper: false
        }
    }

    render() {
        let data = this.props.banner.data;
        return (
            <View style={{height: 200}}>
            { this.state.visibleSwiper  ? 
                <Swiper/>: <Text>LOADING</Text>
            }
            </View>
        );
    }

    componentDidMount() {
        let time = setTimeout(() => {
            this.setState({
                visibleSwiper: true
            });
            clearTimeout(time);
        }, 200);
    }

關於初始ajax資料，可以在create store的時候獲取資料構建初始狀態，也可以在ComponentDidMount的時候去執行action發ajax， 上文寫錯了，github 糾正

github:

https://github.com/helloworld3q3q/react-native-redux-demo

有需要的交流的可以加個好友