zoukankan      html  css  js  c++  java
  • [React Native] Reusable components with required propType

    In this React Native lesson, we will be creating a reusable Badge component. The component will also make use of propTypes to validate that its required data is being passed in when it is used.

    We are going to build Badge component which will just show the user image. This componet will be reused into Profile, Bio and Note component as well.

    import React, {Component} from 'react';
    import {Text, View, StyleSheet, Image} from 'react-native';
    
    var styles = StyleSheet.create({
        container: {
            backgroundColor: '#48BBEC',
            paddingBottom: 10
        },
        name: {
            alignSelf: 'center',
            fontSize: 21,
            marginTop: 10,
            marginBottom: 5,
            color: 'white'
        },
        handle: {
            alignSelf: 'center',
            fontSize: 16,
            color: 'white'
        },
        image: {
            height: 125,
             125,
            borderRadius: 65,
            marginTop: 10,
            alignSelf: 'center'
        }
    });
    
    class Badge extends React.Component {
        render(){
            return (
                <View>
                    <Image style={styles.image} source={{uri: this.props.userInfo.avatar_url}}></Image>
                    <Text style={styles.name}> {this.props.userInfo.name} </Text>
                    <Text style={styles.handle}> {this.props.userInfo.login} </Text>
                </View>
            )
        }
    }
    
    /**
     * Make sure when when user the Badge component, the userInfo object is there
     * @type {{userInfo: *}}
     */
    Badge.propTypes = {
        userInfo: React.PropTypes.object.isRequired
    };
    
    module.exports=Badge;
  • 相关阅读:
    Datediff的使用(统计本日,昨日,本周,本月)
    数据库之查询语句
    数据库之表关系
    数据库中的数据类型
    数据库概念和基本操作
    IO模型
    并发编程之协程
    GIL与多线程(线程池与进程池,同步异步阻塞非阻塞)
    并发编程之多线程
    并发编程之多进程
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5713281.html
Copyright © 2011-2022 走看看