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 (
            <View style={styles.container}>
              <Text style={styles.welcome} onPress={this.timePlus}>
                儿子：有本事揍我啊！
              </Text>
              <Text style={styles.instructions}>
                  你居然揍我{this.state.times}次
              </Text>
              <Text style={styles.instructions} onPress={this.timesReset}>
                信不信我亲亲你
              </Text>

            </View>
        );
    }
})

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 (
      <View style={styles.container}>
        {
          this.state.hit
          ? <Son times={this.state.times} timesReset={this.timesReset}/>
          : null
        }
        <Text style={styles.welcome} onPress={this.timesReset}>
          老子说：心情好就放你一马
        </Text>
        <Text style={styles.instructions} onPress={this.willHit}>
            到底揍不揍
        </Text>
        <Text style={styles.instructions}>
            就揍了你{this.state.times}次而已
        </Text>
        <Text style={styles.instructions} onPress={this.timePlus}>
            不听话，再揍你3次
        </Text>
      </View>
    );
  }
}


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 (
            <View style={styles.container}>
                <Text>列表页面</Text>
            </View>
        )
    }
})
var Edit = React.createClass({
    render: function () {
        return (
            <View style={styles.container}>
                <Text>制作页面</Text>
            </View>
        )
    }
})
var Account = React.createClass({
    render: function () {
        return (
            <View style={styles.container}>
                <Text>账户页面</Text>
            </View>
        )
    }
})


var MyApp = React.createClass({

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

    _renderContent: function(color: string, pageText: string, num?: number) {
        return (
            <View style={[styles.tabContent, {backgroundColor: color}]}>
              <Text style={styles.tabText}>{pageText}</Text>
              <Text style={styles.tabText}>{num} re-renders of the {pageText}</Text>
            </View>
        );
    },

    render: function() {
        return (
            <TabBarIOS
                tintColor="#ee735c">
              <Icon.TabBarItem
                  iconName='ios-videocam-outline'
                  selectIconName='ios-videocam'
                  selected={this.state.selectedTab === 'list'}
                  onPress={() => {
            this.setState({
              selectedTab: 'list'
            });
          }}>
                  <List/>
              </Icon.TabBarItem>
              <Icon.TabBarItem
                  iconName='ios-recording-outline'
                  selectIconName='ios-recording'
                  selected={this.state.selectedTab === 'edit'}
                  onPress={() => {
            this.setState({
              selectedTab: 'edit'
            });
          }}>
                  <Edit/>
              </Icon.TabBarItem>
              <Icon.TabBarItem
                  iconName='ios-more-outline'
                  selectIconName='ios-more'
                  selected={this.state.selectedTab === 'account'}
                  onPress={() => {
            this.setState({
              selectedTab: 'account'
            });
          }}>
                  <Account/>
              </Icon.TabBarItem>
            </TabBarIOS>
        );
    }
})



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);