20170822

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

var Son = React.createClass({
    getDefaultProps() {
        console.log('child','getDefaultProps');
    },
    getInitialState(){
        console.log('getInitialState');
        return {
            times: this.props.times
        }
    },
    timePlus() {
        let times = this.state.times

        times++;
        this.setState({
            times: times
        })
    },

    componentWillMount() {
        console.log('child','componentWillMount');
    },
    componentDidMount() {
        console.log('child','componentDidMount');
    },
    componentWillReceiveProps(props) {
        console.log('child','componentWillReceiveProps');
        this.setState({
          times: props.times
        })
    },
    shouldComponentUpdate() {
        console.log('child','shouldComponentUpdate');
        return true;
    },
    componentWillUpdate() {
        console.log('child','componentWillUpdate');
    },
    componentDidUpdate() {
        console.log('child','componentDidUpdate');
    },

    timesReset() {
      this.props.timesReset();
    },

    render() {
        console.log('child','render');
        return (
            
              
                儿子：有本事揍我啊！
              
              
                  你居然揍我{this.state.times}次
              
              
                信不信我亲亲你
              

            
        );
    }
})

class MyApp extends Component{
  constructor(props) {
  super(props)
    this.state = {
        hit: true,
        times: 2
    }
  }

  componentWillMount() {
    console.log('father','componentWillMount');
  }
  componentDidMount() {
      console.log('father','componentDidMount');
  }
  shouldComponentUpdate() {
      console.log('father','shouldComponentUpdate');
      return true;
  }
  componentWillUpdate() {
      console.log('father','componentWillUpdate');
  }
  componentDidUpdate() {
      console.log('father','componentDidUpdate');
  }
  timesReset(){
    this.setState({
      time: 0
    })
  }
  willHit(){
    this.setState({
      hit: !this.state.hit
    })
  }
  timePlus() {
      var times = this.state.times

      times += 3;
      this.setState({
          times: times
      })
  }

  render() {
    console.log('father','render');
    return (
      
        {
          this.state.hit
          ? 
          : null
        }
        
          老子说：心情好就放你一马
        
        
            到底揍不揍
        
        
            就揍了你{this.state.times}次而已
        
        
            不听话，再揍你3次
        
      
    );
  }
}


var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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

npm i react-native-vector-icons
npm i rnpm -g
rnpm link react-native-vector-icons

react-native upgrade

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TabBarIOS
} from 'react-native';


var List = React.createClass({
    render: function () {
        return (
            
                列表页面
            
        )
    }
})
var Edit = React.createClass({
    render: function () {
        return (
            
                制作页面
            
        )
    }
})
var Account = React.createClass({
    render: function () {
        return (
            
                账户页面
            
        )
    }
})


var MyApp = React.createClass({

    getInitialState(){
        console.log('getInitialState');
        return {
            selectedTab: 'blueTab'
        }
    },

    _renderContent: function(color: string, pageText: string, num?: number) {
        return (
            
              {pageText}
              {num} re-renders of the {pageText}
            
        );
    },

    render: function() {
        return (
            
               {
            this.setState({
              selectedTab: 'list'
            });
          }}>
                  
              
               {
            this.setState({
              selectedTab: 'edit'
            });
          }}>
                  
              
               {
            this.setState({
              selectedTab: 'account'
            });
          }}>
                  
              
            
        );
    }
})



var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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