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

2017-01-22  本文已影响127人  taiji1985

比如定义一个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属性即可

上一篇 下一篇

猜你喜欢

热点阅读