美文网首页
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 自己写的组件自定义事件

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