[React Native] Reusable components with required propType
2016-07-28 02:18
381 查看
In this React Native lesson, we will be creating a reusable Badge component. The component will also make use of
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.
propTypesto 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, width: 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;
相关文章推荐
- [React Native] Using the Image component and reusable styles
- 使用reflux进行react组件之间的通信
- react-redux的connect()方法 学习笔记
- React—native+Android环境搭建和开发配置(Mac)
- Netty源码解读(四)Netty与Reactor模式
- ReactNative中iOS和Android的style分开设置教程
- ReactNative中iOS和Android的style分开设置教程
- React学习笔记
- boost asio学习笔记1--Reactor与Proactor模式
- 最新版CocoaPods的使用与安装-以导入ReactiveCocoa框架为例
- react native第三方组件问题
- React Native 开发笔记
- React-Native学习指南
- React-Native笔记
- React和Angular
- 用 React 做出好用的 Switch 组件
- react-native-pullview 下拉刷新的react native组件
- React native的安装与使用
- React-Native for iOS
- react研究(一)