美文网首页
React-Native 自己写的组件自定义事件

React-Native 自己写的组件自定义事件

作者: taiji1985 | 来源:发表于2017-01-22 10:50 被阅读127次

比如定义一个Logo组件

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

export default class Logo extends Component{
    constructor(){
        super();
        setTimeout(
            ()=>{
                console.log("hello");
                this.props.onTimeOut();
            }
            ,500
        );
    }



    render(){
        let pic = require('../res/logo.png');
        return (
            <View style={logo_styles.container}>
                <Image source={pic} style={{width: 128, height: 128}} />
            </View>
            );
    }
}

const logo_styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  
});

使用 this.props.onTimeOut(); 调用了onTimeOut属性。
然后调用者:

render(){
        return <Logo onTimeOut={this.jumpToHome} />;
  }

添加onTimeOut属性即可

相关文章

  • React-Native 自己写的组件自定义事件

    比如定义一个Logo组件 使用 this.props.onTimeOut(); 调用了onTimeOut属性。然...

  • react-native 自定义弹窗组件实践

    react-native上自定义弹窗组件 1、造轮子背景 用react-native写项目也有段时间了,一直没有看...

  • vue组件的使用

    props和$emit 组件间通讯和自定义事件 父子通讯 props $emit兄弟组件或者隔代组件使用自定义事件...

  • .native && $listeners

    将原生事件绑定到自定义组件 原生事件在自定义组件上是不起作用的 添加修饰符.native,原生事件在自定义组件上就...

  • 2019-01-31 vue组件基础篇2

    子组件 ═══>向父组件传递数据时,就要用到自定义事件v-on除了监听DOM事件外,还可以用于组件之间的自定义事件...

  • React-Native-Redux数据和事件在组件间通信

    React-Native 中数据和事件在组件间通信 React-Native中没有原生的block和代理,所以RN...

  • v-model

    使用自定义事件的表单输入组件自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。...

  • react-native 自定义简单日历组件

    react-native 自定义简单日历组件 先yarn add moment 只依赖这个日期处理插件

  • Vue.js 自定义事件

    自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件。指令 v-on 除了监听 DOM 事件外,还可以用...

  • Lightning Web Component 事件代码示例

    组件的事件 组件通过各种事件来进行通讯。 在 LWC 中,可以通过实现 CustomEvent 接口进行自定义事件...

网友评论

      本文标题:React-Native 自己写的组件自定义事件

      本文链接:https://www.haomeiwen.com/subject/xxtobttx.html