基礎

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 (
      <div>
        <Name name={this.props.name} />
        <Link site={this.props.site} />
      </div>
    );
  }
});

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

var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});

React.render(
  <WebSite name="菜鳥教程" site=" http://www.jser.com" />,
  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 (
      <p onClick={this.handleClick}>
        你<b>{text}</b>我。點我切換狀態。
      </p>
    );
  }
});

React.render(
  <LikeButton />,
  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.lxweimin.com/p/1293bb8ac969

相關參考

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

持續更新.....