React Native ——入门环境搭配以及简单实例

一、Homebrew 是OS X 的套件管理器。

首先我们需要获取 Homebrew

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

1、我们可以先通过在终端输入： brew -v

　　如果没有安装就输入Homebrew的镜像路径去下载

2、拥有了brew，就可以通过它去下载一些依赖了，比如node，我们可以在终端输入：brew install node,如果提示 already installed说明已经下载过了

3、下载watchman，终端输入：brew install watchman，它是用来检测文件变化的一个工具，如果提示 already installed说明已经下载过了

4、然后可以下载flow，终端输入：bre install flow ,它是用来检测jsx语法的工具，如果提示 already installed说明已经下载过了

5、安装完依赖之后，我们就通过npm来安装react Native的命令行工具，终端输入：npm install -g react-native-cli

6、这个时候我们就可以通过命令行来创建一个HelloWorld：react-native init HelloWorld ，过程会比较久一点呐

　　如果确实是太久，那就应该是npm加载的问题啦，可以换成淘宝的镜像（http://npm.taobao.org/），终端输入：

alias cnpm="npm --registry=https://registry.npm.taobao.org 
--cache=$HOME/.npm/.cache/cnpm 
--disturl=https://npm.taobao.org/dist 
--userconfig=$HOME/.cnpmrc"

7、又或者是要取得权限，终端输入：sudo react-native init HelloWorld

二、demo。 

1、demo1:首页显示一张图片和文字，图片不能仅仅通过构建控件，还需要设置宽高［通过index.ios.js文件进行修改］

　　

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';//表示在严格模式下的JS文件

var React = require('react-native');//定义react组件的依赖

//demo：增加一个Image属性
var MOCKED_MOVIES_DATA = [
  {title: 'myTitle', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];
   //等同于 var React = AppRegistry;这样的简化，这是ES6的写法
　　//每一个属性对应的是React里面提供的组件
var {
  AppRegistry,
  Image,
  StyleSheet,
  Text,
  View,
} = React;

var HellWorld = React.createClass({
  render: function() {

    var movie = MOCKED_MOVIES_DATA[0];

    return (
      <View style={styles.container}>

        <Text >{movie.title}</Text>

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

      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,　　　　　　　　　　　　//flexbox
    justifyContent: 'center',  //垂直居中
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  thumbnail:{
    53,
    height:90,   //长度无单位，默认PT
  },
});


//注册组件：ES6的写法，引号内是组件名字，后面是返回对应的组件
AppRegistry.registerComponent('HellWorld', () => HellWorld);

2、demo2:在1 的基础上构造一个列表，通过网络数据请求动态绑定

/**
 * Sample React Native App
 * http://www.cnblogs.com/daomul/
 */
'use strict';

/*网络请求URL*/
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

var React = require('react-native');

var {
  AppRegistry,
  Image,
  StyleSheet,
  Text,
  View,
  ListView,
} = React;

var HellWorld = React.createClass({

  getInitialState:function(){
    return {
      dataSource:new ListView.DataSource({
        rowHasChanged: (row1,row2) => row1 !== row2
      }),
      loaded:false,
    }
  },
  componentDidMount:function(){
    this.fetchData();
  },
  render: function() {
    if (this.state.loaded) {
        return this.renderList();
    }else {
        return this.renderLoadingView();
    }
  },
  renderList:function(){
    return (<ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderListItem}
                style={styles.listView}
            />);
  },
  renderListItem:function(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>;
  },
  renderLoadingView:function(){
    return <View style={styles.listView}>
              <Text>loading.....</Text>
          </View>;
  },

  //负责数据的抓取
  fetchData:function(){
    fetch(REQUEST_URL)
      .then((response)=>response.json())
      .then((responseData)=>{
        this.setState({
            dataSource:this.state.dataSource.cloneWithRows(responseData.movies),
            loaded:true,
        });
      })
      .done();/*调用.done不然有错误信息会被吃掉的*/
  },
});

/*flexDirection:'row' 子容器按照水平方向来flex*/
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    flexDirection:'row',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  thumbnail:{
    width:53,
    height:90,
  },
  rightContainer:{
    flex:1,
  },
  title:{
    fontSize:20,
    marginBottom:8,
    textAlign:'center',
  },
  year:{
    textAlign:'center',
  },
  listView:{
    paddingTop:20,
    backgroundColor:'#F5FCFF',
  }
});

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