该系列博文将从零开始建立一个React-Native项目。代码已经上传至：VanGank
数据来源
使用gank的api进行数据的获取，展示。使用
XMLHttpRequest和Promise
XMLHttpRequest负责网络请求，Promise负责异步的封装。
基本框架搭建
1、参照移植Android原生进行了框架的搭建。
2、基本方法的书写
- 监听返回键
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {};
this.handleBack = this._handleBack.bind(this);
}
componentDidMount() {
BackAndroid.addEventListener('hardwareBackPress', this.handleBack)
}
componentWillUnmount() {
BackAndroid.removeEventListener('hardwareBackPress', this.handleBack)
}
_handleBack() {
let navigator = this.navigator;
if (navigator && navigator.getCurrentRoutes().length > 1) {
navigator.pop();
return true;
}
return false;
}
- Navigator 页面跳转
其实在react Native中实现跳转的方法很多：如之前的文章中提到：//www.greatytc.com/p/9490713b3ef4
在看别人的react项目代码中看到别人的写法：
<Navigator
ref={component=>this.navigator = component}
initialRoute={{
component:HomePage
}}
renderScene={(route, navigator) => { // 用来渲染navigator栈顶的route里的component页面
// route={component: xxx, name: xxx, ...}， navigator.......route 用来在对应界面获取其他键值
return <route.component navigator={navigator} {...route} {...route.passProps}/>
// {...route.passProps}即就是把passProps里的键值对全部以给属性赋值的方式展开 如：test={10}
}}
>
这样，在需要进行跳转的时候，只需要：
_homePageContext.props.navigator.push({
component: WebViewPage,
passProps: {
androidHistoryItem
}
});
即可。
网络请求
使用Promise进行组织数据的异步请求，参照：Promise迷你书
1、第一个版本
async getLatestDate(){
let latestContent = new Promise((resolve, reject)=> {
fetch(API_HISTORY)
.then((response)=> {
return response.json();
})
.then((jsonResult)=> {
if (!jsonResult.error) {
resolve(jsonResult.results);
}
})
});
return latestContent;
},
这样，网络请求的结果（成功的结果和失败的error）封装到一个Promise对象中。然后，在请求数据处：
RequestUtils.getAndroidData(pageNo)
.then((androidList)=> {
_homePageContext.setState({
loaded: true,
androidHistoryDataSource: this.state.androidHistoryDataSource.cloneWithRows(androidList)
});
})
这样。如果首页只有一个接口需要请求，那么这样的封装是尚可的，但是，如果，在一个页面需要同时请求多个数据，则显得捉襟见肘。
2、改良版本
考虑到一个页面可能需要请求多个接口数据，可以使用Promise的all进行多个请求的封装。
单个URL的请求的封装
/**
* 访问Url
*
* @param url 访问的地址
* @param requestMethod 访问的方式
*/
requestUrl(url, requestMethod) {
return new Promise((resolve, reject)=> {
let req = new XMLHttpRequest();
req.open(requestMethod, url, true);
req.onload = ()=> {
if (req.status === 200) {
resolve(req.responseText);
} else {
reject(new Error(req.statusText));
}
};
req.onerror = ()=> {
reject(new Error(req.statusText));
};
req.send();
})
}
然后，单个请求便可以如此：
requestAndroidData(pageNo) {
return _context.requestUrl(ANDROID_HISTORY_URL + pageNo, 'GET').then(JSON.parse);
}
最后，当你请求多个数据之时，便可以如下做：
requestALL(pageNo, callBack) {
Promise
.all([_context.requestAndroidData(pageNo), _context.requestFULIData(pageNo)])
.then((response)=> {
callBack("OK", response);
})
.catch((error)=> {
callBack("FAIL", error);
})
}
这里，将多个请求的结果封装到一个array中，并使用回调CallBack将成功和失败的信息回调到需要使用的地方。
于是乎，基本的界面搭建完毕。
vanGank
