首先放上開(kāi)源項(xiàng)目的地址：React-Native開(kāi)源項(xiàng)目iShiWuPai
這邊筆記主要是記錄看開(kāi)源項(xiàng)目iShiWuPai之后的一些知識(shí)點(diǎn)冰更。前端的話一般都是使用的MVC框架，這樣的話我也是從這三個(gè)方面學(xué)習(xí)戏挡，這個(gè)項(xiàng)目中的數(shù)據(jù)的話用的是Redux框架妇萄，View的話就是使用ReactNative框架笙隙。
index.ios.js文件
import React from 'react';
import { AppRegistry } from 'react-native';
import Root from './app/root';
AppRegistry.registerComponent('iShiWuPai', () => Root);
Root 文件是主入口石景，AppRegister.registerComponent（） 方法是用來(lái)注冊(cè)ReactNative捐康，第一個(gè)字符串要和iOS項(xiàng)目中注冊(cè)的一致贞滨，第二個(gè)傳入的是根類入热。
這里的 ()=>Root 的寫(xiě)法有點(diǎn)像iOS的Block塊，姑且當(dāng)做是JS里面匿名函數(shù)的寫(xiě)法吧晓铆。
root.js文件
import React from 'react';
import { Provider } from 'react-redux';
//這個(gè)是結(jié)構(gòu)化好的state數(shù)據(jù)
import store from './store/store';
//這個(gè)是項(xiàng)目的主要邏輯
import App from './containers/app';
export default class Root extends React.Component {
render() {
return (
<Provider store = {store} >
<App />
</Provider>
)
}
}
這里使用到了react-redux文件勺良，redux 主要是用來(lái)處理數(shù)據(jù)，管理state而存在的骄噪，將工程中使用的所有state結(jié)構(gòu)化成樹(shù)結(jié)構(gòu)尚困，這樣的話就可以跟蹤state的變化（大概就先了解這么多，以后再具體研究）链蕊。使用方法大概就是引入 Provider 類事甜，并且將準(zhǔn)備好的 store（就是已經(jīng)結(jié)構(gòu)化好的數(shù)據(jù)）傳入谬泌。剛開(kāi)始學(xué)習(xí)的時(shí)候不太懂怎么使用其他文件中的類的，這里看到 export 關(guān)鍵字就聯(lián)系到了iOS中的 public 關(guān)鍵字逻谦，這樣的話只要導(dǎo)入這個(gè)文件之后就可以直接使用 export 修飾的類了掌实。
數(shù)據(jù)流
這里參考了文章：redux入門(mén)
store.js文件
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers/rootRudcer';
let createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
let store = createStoreWithMiddleware(rootReducer);
// let state = store.getState();
// alert(state.Search.searchText)
export default store;
這里 redux 和 redux-thunk 的使用方法就是像代碼里寫(xiě)的一樣。reducer 是用來(lái)管理 state 和 action 類邦马，這里每個(gè)頁(yè)面的數(shù)據(jù)就是使用一個(gè) reducer 贱鼻，rootReducer 是各個(gè) reducer 的集合。 action 是用來(lái)更新 state 的滋将，因?yàn)閷⑺械膕tate都集中在一起管理邻悬，那么用 action 來(lái)更新 state 就不會(huì)產(chǎn)生混亂了。就是可以理解成 reducer 提供了一個(gè)容器随闽，在這個(gè)容器里面用 action 來(lái)更新 state 父丰。let store = createStoreWithMiddleware(rootReducer); 這句換就是將 reducer 和 store 發(fā)生關(guān)聯(lián)，這樣當(dāng) store 里面的數(shù)據(jù)發(fā)生改變的時(shí)候就會(huì)觸發(fā) Action 事件橱脸。
middleware是用來(lái)實(shí)現(xiàn) dispatch 方法的異步或者同步執(zhí)行等不同的狀態(tài)础米，這里使用的是異步的 dispatch 方法。
strollingReucer.js
//定義所有types的地方
import * as types from '../actions/actionTypes';
const initialState = {
bannerList: [],
feedList: [],
isLoading: true,
isLoadMore: false,
isRefreshing: false,
};
let strollingReducer = (state = initialState, action) => {
switch (action.type) {
case types.FETCH_BANNER_LIST:
return {
...state,
}
case types.RECEIVE_BANNER_LIST:
return Object.assign({}, state, {
bannerList: action.bannerList,
})
case types.FETCH_FEED_LIST:
return Object.assign({}, state, {
isLoadMore: action.isLoadMore,
isRefreshing: action.isRefreshing,
isLoading: action.isLoading,
})
case types.RECEIVE_FEED_LIST:
return Object.assign({}, state, {
feedList: state.isLoadMore ? state.feedList.concat(action.feedList) : action.feedList,
isRefreshing: false,
isLoading: false,
})
default:
return state;
}
}
export default strollingReducer;
reducer 的任務(wù)就是將傳入的舊 state 和 action 更新并返回新的 state 添诉。示例代碼中的 strollingReducer 就是 rootReducer 中的一個(gè)。
strollingActions.js文件
import * as types from './actionTypes';
import Util from '../common/utils';
export let fetchBanners = ()=> {
let URL = 'http://food.boohee.com/fb/v1/home/banners';
return dispatch => {
// 請(qǐng)求輪播數(shù)據(jù)
dispatch(fetchBannerList());
return Util.get(URL, (response) => {
dispatch(receiveBannerList(response.banners))
}, (error) => {
console.log('Fetch banner list error: ' + error);
dispatch(receiveBannerList([]));
});
}
}
let fetchBannerList = ()=> {
return {
type: types.FETCH_BANNER_LIST,
}
}
let receiveBannerList = (bannerList) => {
return {
type: types.RECEIVE_BANNER_LIST,
bannerList: bannerList,
}
}
這是對(duì)應(yīng)的的 strolling 類的 action 文件,這里需要更新 state 的情況就是加載網(wǎng)絡(luò)數(shù)據(jù)之后更新医寿。之前一直在想 strollingAction 是如何將自身傳遞給 strollingReducer 的栏赴，這里是自己理解的 dispatch 的作用。既然最后要將 reducer 合并成一個(gè)靖秩，這樣的話 dispatch 直接操作的是 state 樹(shù)結(jié)構(gòu)须眷，所有的 action 也都會(huì)返回一個(gè)固定的結(jié)構(gòu):
let receiveBannerList = (bannerList) => {
return {
type: types.RECEIVE_BANNER_LIST,
bannerList: bannerList,
}
}
這里返回的就是一個(gè) action ，格式基本上就是這樣沟突。
Strolling.js文件
componentDidMount() {
InteractionManager.runAfterInteractions(() => {
const {dispatch} = this.props;
dispatch(fetchBanners());
dispatch(fetchFeeds(page, canLoadMore, isRefreshing, isLoading));
});
}
render() {
const {Strolling} = this.props;
let bannerList = Strolling.bannerList;
let feedList = Strolling.feedList;
let sourceData = {'banner': [bannerList], 'feed': feedList};
let sectionIDs = ['banner', 'feed'];
let rowIDs = [[0]];
...
}
在 Strolling 中使用數(shù)據(jù)的時(shí)候有兩個(gè)個(gè)地方?jīng)]有看明白花颗， const {dispatch} = this.props 和 const {Strolling} = this.props 。通過(guò)查 redux 文檔惠拭，原來(lái)這個(gè)地方能從props里直接取到 dispatch 和 Strolling 是因?yàn)榭蚣苷{(diào)用了React Redux connect()注入props扩劝。這樣的話就做到了數(shù)據(jù)的傳輸使用。
