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;
  • 相关阅读:
    2-1(续)
    2-1
    28-69. Sqrt(x)
    27-75. Sort Colors
    26-78. Subsets
    MySQL--->存储引擎及图形化工具
    MySQL--->高级对象
    MySQL--->常用函数
    MySQL--->多表查询
    MySQL--->高级查询
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5713281.html
Copyright © 2011-2022 走看看