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:
},
name: {
alignSelf: 'center',
fontSize: ,
marginTop: ,
marginBottom: ,
color: 'white'
},
handle: {
alignSelf: 'center',
fontSize: ,
color: 'white'
},
image: {
height: ,
width: ,
borderRadius: ,
marginTop: ,
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;

[React Native] Reusable components with required propType的更多相关文章

  1. WHAT IS THE DIFFERENCE BETWEEN REACT.JS AND REACT NATIVE?

    Amit Ashwini - 09 SEPTEMBER 2017 React.js was developed by Facebook to address its need for a dynami ...

  2. 📝 没 2 年 React Native 开发经验,你都遇不到这些坑

    如果你喜欢我的文章,希望点赞 收藏 评论 三连支持一下,谢谢你,这对我真的很重要! React Native 开发时,如果只是写些简单的页面,基本上按着官方文档 reactnative.dev就能写出 ...

  3. [React Native] Using the Image component and reusable styles

    Let's take a look at the basics of using React Native's Image component, as well as adding some reus ...

  4. React Native pod install报错 `Yoga (= 0.44.3.React)` required by `React/Core (0.44.3)`

    使用pod安装,可能会因为Podfile的路径指向错误或者没有路径指向因为报错. 报错截图如下: 这是因为在指定的路径没有寻找到相应的组件.此时就需要修改podfile文件中的路径,由于上方提示没有  ...

  5. React Native 初步

    [React Native 初步] 1.Create React Native App is the easiest way to start building a new React Native ...

  6. 3.React Native在Android中自己定义Component和Module

    React Native终于展示的UI全是Native的UI.将Native的信息封装成React方便的调用. 那么Native是怎样封装成React调用的?Native和React是怎样交互的? V ...

  7. Xamarin vs React Native vs Ionic vs NativeScript: Cross-platform Mobile Frameworks Comparison

    CONTENTS Reading time: 14 minutes Cross-platform mobile development has long been a viable alternati ...

  8. React Native纯干货总结

    随着项目也渐渐到了尾声,之前的项目是mobile开发,采用的是React Native.为即将要开始做RN项目或者已经做过的小伙伴可以参考借鉴,也顺便自己做一下之前项目的总结. 文章比较长,可以选择自 ...

  9. react native 入门实践

    上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.希望 ...

随机推荐

  1. poj2823

    这是一道题意简单,数据较大的题(喜闻乐见): 一开始可能会想到RMQ问题,ST,线段树都是O(nlogn),应该勉强能过(没试过): 由于这道题区间是滚动连续的,所以,可以使用单调队列! 以最小值为例 ...

  2. sencha项目升级

    对于已经开发好的sencha项目进行升级,要做的有以下几步(以sencha2.2.0升级到sencha2.3.1为例): 1,下载Sencha-2.3.1sdk,下载地址:http://cdn.sen ...

  3. session问题

    如果 <sessionState mode="StateServer" stateConnectionString="tcpip=127.0.0.1:42424&q ...

  4. TortoiseGit连接github不用每次输入用户名和密码的方法

    每次git clone 和push 都要输入用户名和密码.虽然安全,但在本机上每次都输有些麻烦,如何记住用户名和密码呢? 当你配置好git后,在C:\Documents and Settings\Ad ...

  5. [面试题] BloomFilter 无序40亿不重复 uint 整数, 给予任意的数,求是否在这40亿之中 + 无序数组中找2个相同的值

    一道百度面试题(待解中) 具体:给40亿个不重复的unsigned int的整数,没排过序的,然后再给几个数,如何快速判断这几个数是否在那40亿个数当中? 分析下,首先应该是空间复杂度(40亿uint ...

  6. android——创建camera应用(译)

     只是选择相机部分来翻译.下面是主要内容 有些开发者可能需要Camera的接口,来定制自己程序的外观和特殊功能.创建自定义的Camera界面比使用using an Intent需要编写更多的代码,但是 ...

  7. HDU1540 Tunnel Warfare 水题

    分析:不需要线段树,set可过,STL大法好 #include <iostream> #include <cstdio> #include <cstring> #i ...

  8. HDU 5617 Jam's maze 巧妙DP

    题意:给你一个字符矩阵,从(1,1)到(n,n)有很多种走法,每一种走法形成一个字符串,问有多少种走法形成的字符串是回文的 分析:(粘贴BC题解) 的是回文串,有人会想到后缀数组自动机马拉车什么的,其 ...

  9. API性能测试基本性能指标及要求

    略 适用 Lifeix 所有后台应用. 1.事务(Transaction) 在web性能测试中,一个事务表示一个“从用户发送请求->web server接受到请求,进行处理-> web s ...

  10. (二)NUnit单元测试心得

    现在接着上次说到的内容,如何在项目中进行单元测试.由于做了一些调整,我上次发的内容,我这次也会重新发一次,请认真看看. 一.软件开发过程中存在的问题(没有使用单元测试的情况下) 难于定位bug的位置 ...