reactNative-项目开始

基础

react

http://learn.jser.com/react/react-tutorial.html

官方文档

http://facebook.github.io/react-native/docs/getting-started.html

各种资源

https://github.com/reactnativecn

命令

• Run "npm install -g react-native-git-upgrade"
• Run "react-native-git-upgrade" 初始化的时候

语言

http://es6.ruanyifeng.com/

prop

var WebSite = React.createClass({
  render: function() {
    return (
      

        
        
      
    );
  }
});

var Name = React.createClass({
  render: function() {
    return (
      
{this.props.name}
    );
  }
});

var Link = React.createClass({
  render: function() {
    return (
      
        {this.props.site}
      
    );
  }
});

React.render(
  ,
  document.getElementById('example')
);

State
下实例中创建了 LikeButton 组件，getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件

  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? '喜欢' : '不喜欢';
    return (
      

        你{text}我。点我切换状态。
      
    );
  }
});

React.render(
  ,
  document.getElementById('example')
);

image.png

npm install -g create-react-app

注意：目前npm5（发文时最新版本为5.0.4）存在安装新库时会删除其他库的问题，导致项目无法正常运行。请尽量使用yarn代替npm操作。

两个tabbar 都可以
https://github.com/happypancake/react-native-tab-navigator

文档摘要

仅仅使用props 和基础的Text 、Image 以及View组件，你就已经足以编写各式各样的UI组件了
tabbar
navgationBarIOS

项目问题

全局变量方案

https://stackoverflow.com/questions/33117227/setting-environment-variable-in-react-native/33134782#comment54087848_33134782

生命周期

https://race604.com/react-native-component-lifecycle/

类的布局

http://blog.csdn.net/fengyuzhengfan/article/details/52233582

UI

flex 布局
大话布局
http://blog.csdn.net/magneto7/article/details/70854472

http://weibo.com/1712131295/CoRnElNkZ?ref=collection&type=comment#_rnd1503470855218
tableview
http://www.jianshu.com/p/1293bb8ac969

相关参考

http://www.jianshu.com/p/b88944250b25

持续更新.....