React-Native配合ignite開(kāi)發(fā)文檔
1.部署調(diào)試
1）Nuclide的start package有時(shí)候有問(wèn)題，手機(jī)顯示奇怪的錯(cuò)誤，可以在命令行
npm start -- --reset-cache
重置后，啟動(dòng)正常。
2）安裝程序到真機(jī)，如果命令行不行，androidstudio里安裝。
3）真機(jī)調(diào)試，彈出菜單，晃動(dòng)手機(jī)出，如果不出，手機(jī)設(shè)置->程序->本程序->允許懸浮框。
模擬器，ctrl+m，調(diào)出調(diào)試菜單。
4)Nuclide菜單選擇start debugging,然后手機(jī)調(diào)試菜單選擇remote debug
然后在程序中打斷點(diǎn)，單步執(zhí)行，可以看出程序的流轉(zhuǎn)路徑。
Redux的程序有點(diǎn)類似QT和win32的消息泵，每個(gè)地方跳轉(zhuǎn)不靠函數(shù)調(diào)用，全是異步消息，異步調(diào)用，聲明消息的地方比較特殊Action，處理消息的地方也比較特殊，下面咱們著重過(guò)一下。
5)初步調(diào)試的時(shí)候，要解決程序編碼問(wèn)題，主要是多個(gè)逗號(hào)，函數(shù)名大小不一致，沒(méi)有定義這些，因?yàn)閖s不需要編譯，這些還只能運(yùn)行時(shí)發(fā)現(xiàn)。
優(yōu)先看手機(jī)的錯(cuò)誤提示，因?yàn)槭謾C(jī)屏幕較小，有時(shí)候外殼程序會(huì)直接崩潰，這時(shí)候可以在終端開(kāi)npm start，看這個(gè)輸出。
程序基本能運(yùn)行起來(lái)，沒(méi)有上面這種簡(jiǎn)單報(bào)錯(cuò)后，開(kāi)始使用調(diào)試器查看程序變量進(jìn)行正常的邏輯調(diào)試。
2.開(kāi)發(fā)
Ignite匯集了多個(gè)主流開(kāi)發(fā)庫(kù)，并組裝成自己的框架。咱們先對(duì)最常用的，從服務(wù)器請(qǐng)求數(shù)據(jù)開(kāi)始，這個(gè)不同于android的處理，只需要”后臺(tái)線程+網(wǎng)絡(luò)請(qǐng)求”一步，React需要使用redux的方式:
構(gòu)建Action -> reducer ->合并reducer -> sagas配置
調(diào)用路徑是，screen里發(fā)起Action，通過(guò)上面的reducer配置，傳遞到Sagas處理，處理請(qǐng)求后，put Action回到Redux，改變state，然后state改變又回到screen里，對(duì)應(yīng)到prop的改變，最終screen在componentWillReceiveProps收到請(qǐng)求的數(shù)據(jù)。
2.1 API請(qǐng)求
這個(gè)我理解的是:
1）所有同一個(gè)網(wǎng)站的API接口都要寫到一個(gè)Service里
2）然后每個(gè)具體的接口函數(shù)都要封裝成一組Redux+Saga，然后名字起名要和接口對(duì)應(yīng)，這樣可以最少的修改代碼達(dá)到可用狀態(tài)。
我們以儀表系統(tǒng)的請(qǐng)求為例：
假如服務(wù)器端提供2個(gè)接口函數(shù)：
1.get_equipment_name_list GET無(wú)參
2.get_equipment_model_list POST參數(shù)是nameId
我們現(xiàn)在開(kāi)始做第一個(gè)接口。
1.第一步，寫Service
import apisauce from 'apisauce'
// our "constructor"
const create = (baseURL ='http://equipment.jimglobal.com/api/') => {
// ------
// STEP 1
// ------
//
// Create and configure an apisauce-based api object.
//
const api = apisauce.create({
// base URL is read from the "constructor"
baseURL,
// here are some default headers
headers: {
'Cache-Control': 'no-cache'
},
// 10 second timeout...
timeout: 10000
})
const login=(username,password) => api.post('login',{username :username,password:password})
const get_equipment_name_list=() => api.get('get_equipment_name_list')
const get_equipment_model_list=(nameId) => api.post('get_equipment_model_list', {nameId:nameId})
return {
login,
get_equipment_name_list,
get_equipment_model_list
}
}
// let's return back our create method as the default.
export default {
create
}
要點(diǎn)：1) baseURL寫服務(wù)器地址
2)綠色的部分，注意get, post,和參數(shù)的處理。
3）紅色的部分，對(duì)外提供的接口。
這個(gè)怎么上傳文件我還沒(méi)試。這個(gè)一般都不會(huì)寫錯(cuò)。
2.第二步，寫redux
對(duì)于get_equipment_name_list和get_equipment_model_list，我們要提供獨(dú)立的redux。
比如我們第一個(gè)接口我們叫GetEquipmentNameList，我們就可以做下面
使用ignite generate redux GetEquipmentNameList
生成的代碼：
我們不需要參數(shù)，所以可以把data去掉，改為：
const { Types, Creators } = createActions({
getEquipmentNameListRequest: null,
getEquipmentNameListSuccess: ['payload'],
getEquipmentNameListFailure: null
})
INITIAL_STATE中也不需要data，所以可以去掉
export const INITIAL_STATE = Immutable({
fetching: null,
payload: null,
error: null
})
Request自然也不需要data，去掉
// request the data from an api
export const request = (state) =>
state.merge({ fetching: true, payload: null })
然后這個(gè)文件就改好了，可以看到我們只需要調(diào)整參數(shù)部分，，和state部分，其他的用默認(rèn)的就可以。
但是具體原理也要明白：
createActions中的getEquipmentNameListRequest被自動(dòng)轉(zhuǎn)化為GET_EQUIPMENT_NAME_LIST_REQUEST， 最后createReducer和處理函數(shù)關(guān)聯(lián)起來(lái),處理函數(shù)更新state。
3.第三步，寫saga
Saga是真實(shí)發(fā)起api請(qǐng)求的地方。
默認(rèn)生成的代碼
我們注意到getGet#,生成器會(huì)添加get，所以咱們的命名還是不要GET這種動(dòng)詞比較好。除了默認(rèn)的data參數(shù)，其他都是好的，所以命令很重要，配套的Redux和Sagas命令一定要一樣。我們把a(bǔ)ction和data去掉，這個(gè)就完了。
export function * getGetEquipmentNameList (api) {
// make the call to the api
const response = yield call(api.getgetEquipmentNameList)
4.第四步，連接
連接要分兩個(gè)地方，redux和saga要分別做連接
打開(kāi)Redux/index.js文件：
EquipmentNameList : require('./GetEquipmentNameListRedux').reducer
這一行是我們要添加的，注意這個(gè)EquipmentNameList，這個(gè)不是胡亂起的，在screen中的mapStateToProps中的state是全局的，EquipmentNameList就是我們這個(gè)redux的數(shù)據(jù)。
打開(kāi)Sagas/index.js文件，跟著注釋家，導(dǎo)入types，導(dǎo)入saga的函數(shù)
/* ------------- Types ------------- */
import { GetEquipmentNameListTypes } from '../Redux/GetEquipmentNameListRedux'
/* ------------- Sagas ------------- */
import { getGetEquipmentNameList} from './GetEquipmentNameListSagas'
如果api是新的，就要搞一個(gè)實(shí)例
const appApi=AppApi.create()
然后連入root
takeLatest(GetEquipmentNameListTypes.GET_EQUIPMENT_NAME_LIST_REQUEST, getGetEquipmentNameList, appApi),
連接就做完了。
按步驟做，1分鐘左右就能完成一套。
5.第五步，Screen里使用
現(xiàn)在我們?cè)贚oginScreen里加入對(duì)這個(gè)接口的調(diào)用。
先導(dǎo)入Action
import GetEquipmentNameListActions from '../Redux/GetEquipmentNameListRedux'
然后處理mapStateToProps，把數(shù)據(jù)合并到state去。
const mapStateToProps = (state) => {
return {
fetching: state.login.fetching,
response: state.login.response,
error: state.login.error,
equipmentname_payload : state.EquipmentNameList.payload
}
}
然后處理mapDispatchToProps，把Action封裝成自己的props“getEquipmentNameList”， 這樣自己的函數(shù)中就可以直接調(diào)用了。
const mapDispatchToProps = (dispatch) => {
return {
attemptLogin: (username, password) => dispatch(LoginActions.loginRequest(username, password)),
getEquipmentNameList:() => dispatch(GetEquipmentNameListActions.getEquipmentNameListRequest())
}
}
調(diào)用：隨便什么地方，只要調(diào)用，就會(huì)發(fā)起請(qǐng)求。
//在這個(gè)地方做EquipmentName
this.props.getEquipmentNameList();
最后，接收請(qǐng)求，這個(gè)equipmentname_payload就是mapStateToProps最下面那行的那個(gè)，下面自己想怎么做就怎么做了。
componentWillReceiveProps (newProps) {
// this.forceUpdate()
// Did the login attempt complete?
if(newProps.equipmentname_payload)
{
}
作者：MackJson
鏈接：http://www.itdecent.cn/p/efc9a00b843a
來(lái)源：簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
