React-Native配合ignite開發(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ù)名大小不一致碍扔，沒有定義這些瘩燥，因?yàn)閖s不需要編譯，這些還只能運(yùn)行時(shí)發(fā)現(xiàn)不同。
優(yōu)先看手機(jī)的錯(cuò)誤提示厉膀，因?yàn)槭謾C(jī)屏幕較小，有時(shí)候外殼程序會(huì)直接崩潰二拐，這時(shí)候可以在終端開npm start服鹅，看這個(gè)輸出。
程序基本能運(yùn)行起來(lái)百新，沒有上面這種簡(jiǎn)單報(bào)錯(cuò)后企软，開始使用調(diào)試器查看程序變量進(jìn)行正常的邏輯調(diào)試。
2.開發(fā)
Ignite匯集了多個(gè)主流開發(fā)庫(kù)饭望，并組裝成自己的框架仗哨。咱們先對(duì)最常用的形庭，從服務(wù)器請(qǐng)求數(shù)據(jù)開始，這個(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)在開始做第一個(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è)怎么上傳文件我還沒試糊肠。這個(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要分別做連接
打開Redux/index.js文件：
EquipmentNameList : require('./GetEquipmentNameListRedux').reducer
這一行是我們要添加的，注意這個(gè)EquipmentNameList造虏，這個(gè)不是胡亂起的御吞，在screen中的mapStateToProps中的state是全局的，EquipmentNameList就是我們這個(gè)redux的數(shù)據(jù)漓藕。
打開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.reibang.com/p/efc9a00b843a
來(lái)源：簡(jiǎn)書
著作權(quán)歸作者所有鹰椒。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)锡移，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
