react-native 的生命周期,以及通信关系,转载

转载 2017年03月20日 11:05:36

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';
var Son = React.createClass({
    getDefaultProps(){
        console.log('getDefaultProps')
    },
    getInitialState(){
        return {
            times: 0
        }
    },
    timesPlus(){
        let times = this.state.times
        times++
        this.setState({
            times: times
        })
    },
    timesReset(){
        this.props.timesReset()
    },
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome} onPress={this.timesPlus}>
                    儿子说有本事揍我
                </Text>
                <Text style={styles.instructions}>
                    你居然揍了{this.state.times}次
                </Text>
                <Text style={styles.instructions} onPress={this.timesReset}>
                    反揍{this.state.times}次
                </Text>
            </View>
        );
    }
})
var proMyapp = React.createClass({
    getDefaultProps(){
        console.log('father', 'getDefaultProps')
    },
    getInitialState(){
        return {
            hit: false,
            times: 0
        }
    },
    timesReset(){
        this.setState({
            times: 0
        })
    },
    willHit(){
        this.setState({
            hit: !this.state.hit
        })
    },
    timesPlus(){
        let times = this.state.times
        times += 3
        this.setState({
            times: times
        })
    },

    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.timesPlus}>
                    就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('proMyapp', () => proMyapp);
不知道为什么这里换乘es5 的写法会出现爆红,可能是因为rn版本的问题不一样

React-Native生命周期的触发场景和一些小建议

转载请注明出处:王亟亟的大牛之路把王者荣耀删了后这几天回到了举铁,遛鸟,打球,睡觉的正常节奏,然后卡了看之前写的一些东西,发现生命周期没写,那么就补一篇(虽然搜搜一大堆,但是残缺总不合适,再加点建议点...
  • ddwhan0123
  • ddwhan0123
  • 2017年11月09日 17:54
  • 831

React-Native学习笔记之生命周期

React-Native学习笔记之生命周期
  • qq_25404567
  • qq_25404567
  • 2016年09月26日 18:15
  • 1561

winform生命周期(备忘)

最近遇到关于winform生命周期上的问题,然后在网上找了一下,如下: 1,窗体启动时:Control.HandleCreatedControl.BindingContextChangedForm.L...
  • gahetgidt
  • gahetgidt
  • 2011年01月17日 20:36
  • 640

React-Native 学习

指定版本  react-native init --version 0.48.2 react-native 文件目录结构 在安装第三方库时如: npm install react-native-...
  • qioutiandeyun
  • qioutiandeyun
  • 2018年01月05日 09:34
  • 67

react-native 与 native组件之间的通信

react-native与native组件之间通信一些坑 ##![这里写图片描述]1.the call back exists in modules …. 情况描述: native使用 ...
  • cc_qjy
  • cc_qjy
  • 2017年08月01日 08:39
  • 272

单片机多机通信(转载)带校正

单片机多机通信(转载)带校正 (2011-08-07 01:37:46) http://blog.sina.com.cn/s/blog_6a1d74f90100udx7.html 一、多机通...
  • kc87654321
  • kc87654321
  • 2011年10月01日 16:44
  • 1062

软件开发的生命周期模型的选择与软件质量的关系

软件开发生命周期是指软件产品从考虑其概念开始到该软件产品交付使用为止的整个时期。一般包括:概念阶段、需求阶段、设计阶段、实现阶段、测试阶段、安装阶段,以及交付阶段。这些阶段可以有重叠,执行时也可以有迭...
  • Alxima
  • Alxima
  • 2015年06月09日 22:36
  • 755

Activity的生命周期和Activity的四种启动模式

Activity的七种生命周期方法void onCreate(); Activity已经被创建 void onStart(); Activity已经显示在屏幕,但是还没有得到焦点(不能交互) void...
  • suncold123
  • suncold123
  • 2015年09月08日 10:49
  • 666

生命周期阶段与插件目标的绑定关系

内置绑定 Maven在核心为一些主要的生命周期阶段绑定了很多插件的目标 clean生命周期阶段与插件目标的绑定关系 生命周期阶段 插件目标 pre...
  • yilichangsheng
  • yilichangsheng
  • 2017年03月08日 15:57
  • 242

软件工程的生命周期

生命周期法的各个阶段   生命周期法的四个阶段需求分析、设计、实施、运行和审计:   1) 需求分析阶段   需求分析是确定企业需求并把这种需求反映到信息系统需求说明书中。   需求分析阶段主要是满...
  • puhaibo_skynet
  • puhaibo_skynet
  • 2014年08月27日 08:08
  • 549
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react-native 的生命周期,以及通信关系,转载
举报原因:
原因补充:

(最多只允许输入30个字)