跨平台开发ReactNative学习

第一个项目

第一个ReactNative是网络获取电影信息，用列表展示。如图oc中基本的tableview样式

项目源码请见firstReactNative

展示我的学写该项目的学习笔记，掺杂了一些我的个人理解，可能会更清楚一些。原文地址

创建项目

创建第一个项目，项目名字为firstReactNative

react-native init firstReactNative

用终端或Xcode运行该项目，具体步骤见React Native准备工作

引入组件

创建完毕项目打开index.ios.js文件，文件上部有如下代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} 

这里是React Native中的一些组件，需要引入。项目中牵扯到图片展示，需要引入Image组件。

顾名思义第一个import是引入组件框架，第二个import是引入几个常用的组件。

AppRegistry 是注册应用组件，应用只有注册之后才能正确渲染，应用只整体注册一次，并不是每个组件都注册，对应该文件最下面的注册应用操作

AppRegistry.registerComponent('firstReactNative', () => firstReactNative);

StyleSheet 是样式创建组件，在const styles = StyleSheet.create()使用。

Text View 是一些常用的控件组件，Image组件添加到这下面，注意要在View后面写,(最后一个后面的,可写可不写)

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
} 

创建模拟数据

在任意位置添加变量数据URLDATA (不要在其他方法{}内添加)

var URLDATA = [
    {title: '标题', year: '2016', posters:{thumbnail: 'http://i.imgur.com/UePbdph.jpg'}}
];

iOS9中http请求需要添加允许任意的请求方式，在info.plist里添加App Transport Security Settings在该字段下选择Allow Arbitrary Loads并设置为YES。原因见iOS9的适配特性

修改组件

渲染组件

在class firstReactNative extends Component { 里面更改为如下代码：

render() {
    var movie = URLDATA[0]
    return (
      <View style={styles.container}>
        <Text >{movie.title}</Text>
        <Text>{movie.year}</Text>
        <Image source = {{uri: movie.posters.thumbnail}} />
      </View>
    );
}

movie是拿到的模拟数据分别用Text Image渲染到屏幕上。command + R刷新模拟器运行程序。这时候还看不到图片，因为没有指定图片的宽高

设置组件样式

把原有代码块const styles = StyleSheet.create({});删除掉

创建新的渲染样式

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
});

并把图片的渲染样式thumbnail添加到组件Image上

<Image 
    source = {{uri: movie.posters.thumbnail}}
    style = {styles.thumbnail}
/>

command + R刷新模拟器运行程序。

改变样式排版

现在是文字在上图片在下的样式，需要调整样式，图片在左边，文字在右边。这是基本的tableview样式

在styles里添加几个样式

rightContainer: { //存放文字view的样式
    flex: 1, //是让里面存放的元素具有相同的宽度，忽略存放内容。css样式属性。
},
title: {//标题样式
    fontSize: 20,
    marginBottom: 8,
    textAlign: 'center',
},
year: {//简介样式
    textAlign: 'center',
},

修改return ()里面的代码，将新添加的样式添加到相应组件上

return (
  <View style={styles.container}>
    <Image 
      source = {{uri: movie.posters.thumbnail}}
      style = {styles.thumbnail}
     />
    <View style = {styles.rightContainer}>
        <Text style = {styles.title}>{movie.title}</Text>
        <Text style = {styles.year}>{movie.year}</Text>
    </View>
  </View>
);

相比于之前代码，<Image />代码块移动到了<Text>上面，因为image要在文字的左边，从上到下，从左到右渲染，如果还放在text的下面的话，会出现文字在左边，图片在右边的效果，请自行试验。

把Text用一个<View>组件包起来，并赋予样式rightContainer，里面有一个flex: 1属性，这个容器的属性宽度会自动变宽，不会因为内容多少而定，会把图片挤压到屏幕边缘

给文字分别添加title year样式，指定的文字的大小以及居中显示。 marginBottom: 8,是让title下面有8像素的距离。

command + R刷新模拟器运行程序。

至此，基本的单个样式已完成，如图定义完成tableview里单个cell的样式。下面开始获取网络真是数据，完成列表展示

获取网络数据

从Rotten Tomatoes（美国影评网站烂番茄）的api获取数据

在文件开头import的下面定义接口地址变量

var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

把下面代码放到render()函数之前。在网络获取之前初始化一个null状态，根据this.state.movies == null判断数据是否抓取成功。

constructor(props) {
    super(props);
    this.state = {
        movies: null,
    };
    this.fetchData = this.fetchData.bind(this);
}

添加React组件生命周期方法componentDidMount()，在组件加载完毕之后执行，只执行一次，在这里进行数据请求。

componentDidMount() {
    this.fetchData();
}

写fetchData()函数，网络请求

fetchData() {
    fetch(REQUEST_URL)
        .then((response) => response.json())
        .then((responseData) => {
            this.setState({
                movies: responseData.movies,
            });
        })
        .done();
}

修改原来的render函数，修改样式

render() {
    if (!this.state.movies) { //如果没有数据 返回renderLoadingView()
        return this.renderLoadingView();
    }
    var movie = this.state.movies[0];
    return this.renderMovie(movie); //有数据的时候，执行这个函数
}

实现renderLoadingView()函数和renderMovie()函数

renderLoadingView() {//添加加载提示
    return (
        <View style = {styles.container}>
            <Text>
                正在加载电影数据...
            </Text>
        </View>
    );
}
renderMovie(movie) {//拿到网络获取的数据，添加到控件上
    return (
    <View style={styles.container}>
        <Image 
            source = {{uri: movie.posters.thumbnail}}
            style = {styles.thumbnail}
        />
        <View style = {styles.rightContainer}>
            <Text style = {styles.title}>{movie.title}</Text>
            <Text style = {styles.year}>{movie.year}</Text>
        </View>
    </View>
    );
}

command + R刷新模拟器运行程序。这时候得到的数据是网络数据

ListView

ListView可以说是ReactNative里的UITableView，会安排视图的渲染，只渲染屏幕上显示的元素，渲染完毕被移出屏幕外的元素会被移除掉。

第一步引入ListView组件，跟上文中引入Image组件一样。

修改render函数，把返回一条数据的代码修改为渲染包含多个电影信息的ListView

render() {
    if (!this.state.loaded) {
        return this.renderLoadingView();
    }
    return (
        <ListView 
            dataSource = {this.state.dataSource}
            renderRow = {this.renderMovie}
            style = {styles.listView}
        />
    );
}

修改constructor(props)代码，不再使用this.state.movies来存放数据，把数据存放到dataSource里面，可以根据布尔值this.state.loaded来判断是否加载完毕

constructor(props) {
    super(props);
    this.state = {
        dataSource: new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        }),
        loaded: false,
    };
    this.fetchData = this.fetchData.bind(this);
}

修改fetchData方法，把数据更新到dataSource

fetchData() {
    fetch(REQUEST_URL)
        .then((response) => response.json())
        .then((responseData) => {
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
                loaded: true,
            });
        })
        .done();
}

添加样式listView

listView: {
    paddingTop: 20,
    backgroundColor: '#F5FCFF',
},

command + R刷新模拟器运行程序。达到我们最终要的结果