[React-Native项目开发实践] 一、初步搭建并运行

该系列博文将从零开始建立一个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中实现跳转的方法很多：如之前的文章中提到：http://www.jianshu.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