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

推荐阅读更多精彩内容

  • 经验之谈1:经验是一道助力。 没有阅历、没有经验,是应届毕业生找工作的劣势。很多人因为没有经验,很容易吃亏。也有很...
    玉_莲子阅读 31评论 0 2
  • 【感恩有你】20170822学习力践行记录D99 践行:《手指摇》外婆桥指读一遍 今天和宝宝玩了会儿乐高,把乐高块...
    恩恩妈阅读 12评论 0 0
  • 一、计划&回顾 (一)今日计划 (二)今日回顾 1.总体完成情况: (三)未完成任务处理: 《跃迁》领读:最终感想...
    成长路上的碎碎念阅读 41评论 0 0
  • [不忘初心]20170822 学习力六期践行D99 1. 英语:今天白天自己在家里完成了牛津树点读7本, 真是棒棒...
    夏苏语阅读 27评论 0 0
  • 一、今日计划 我今天的任务根据优先级安排如下: 学业任务:Software Engineer预计成果:课堂笔记预计...
    RicciWoo阅读 348评论 0 49