[React Native] Build a Github Repositories component
Nav to Repos component from Dashboard.js:
goToRepos(){
api.getRepos(this.props.userInfo.login)
.then((res)=>{
this.props.navigator.push({
title: 'Repos',
component: Repos,
passProps: {
userInfo: this.props.userInfo,
repos: res
}
});
})
}
Repos:
import React, {Component} from 'react';
import {View, StyleSheet, Text, ScrollView, TouchableHighlight} from 'react-native'; import Badge from './Badge';
import Divdir from './Helpers/divdir'; var styles = StyleSheet.create({
container: {
flex: 1,
},
rowContainer: {
flexDirection: 'column',
flex: 1,
padding: 10
},
name: {
color: '#48BBEC',
fontSize: 18,
paddingBottom: 5
},
stars: {
color: '#48BBEC',
fontSize: 14,
paddingBottom: 5
},
description: {
fontSize: 14,
paddingBottom: 5
}
}); class Repos extends React.Component{
openPage(url){
console.log('the url is', url);
}
render(){
var list = this.props.repos.map((repo, index) => {
const desc = repo.description ? <Text style={styles.description}> {repo.description} </Text> : <View />;
return (
<View key={index}>
<View style={styles.rowContainer}>
<TouchableHighlight
onPress={this.openPage.bind(this, repo.html_url)}
underlayColor='transparent'>
<Text style={styles.name}>{repo.name}</Text>
</TouchableHighlight>
<Text style={styles.stars}> Stars: {repo.stargazers_count} </Text>
e {desc}
<Divdir></Divdir>
</View>
</View>
)
});
return (
<ScrollView style={styles.container}>
<Badge userInfo={this.props.userInfo} />
{list}
</ScrollView>
)
}
}; Repos.propTypes = {
userInfo: React.PropTypes.object.isRequired,
repos: React.PropTypes.object.isRequired
}; module.exports = Repos;
[React Native] Build a Github Repositories component的更多相关文章
- [React Native] Build a Separator UI component
In this lesson we'll create a reusable React Native separator component which manages it's own style ...
- React Native Build Apk
1 React Native安卓项目打包APK 1.1 产生签名的key 先通过keytool生成key 1 keytool -genkey -v -keystore demo-release-key ...
- React Native ——实现一个简单的抓取github上的项目数据列表
/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React ...
- [React Native] Using the WebView component
We can access web pages in our React Native application using the WebView component. We will connect ...
- [RN] 01 - Init: Try a little bit of React Native
Ref: React Native跨平台移动应用开发 后记:这本书博客味有点浓. 本篇涉及新建工程的若干套路,以及一点语法知识. 创建新工程 (1) 解决的一大核心问题: (2) 使用Javascri ...
- React Native微信分享 朋友圈分享 Android/iOS 通用
超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用 2016/06/16 | React Native技术文章 | Sky丶清| 暂无评论 | 1 ...
- React Native实现微信分享
(一)前言 现阶段大家在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋友圈的分享功能. 刚创建的React N ...
- [RN] 02 - Overview: React Native Practice of 50 lectures
观看笔记:零基础 React Native 实战开发视频 50讲 本篇效果:RN入门,整体认识 基本原理 # 1 React到RN # 2 一个简单的例子 /** * Sample React Nat ...
- React Native入门指南
转载自:http://www.jianshu.com/p/b88944250b25 前言 React Native 诞生于 2015 年,名副其实的富二代,主要使命是为父出征,与 Apple 和 Go ...
随机推荐
- Codeforces 364A - Matrix
原题地址:http://codeforces.com/problemset/problem/364/A 题目大意: 给定一个数字a(0 ≤ a ≤ 109)和一个数列s(每个数都是一位,长度不超过40 ...
- 8.21 usaco
summary:6 bzoj1692://后缀数组就行了O(nlogn)c[30]会RE...注意!!! #include<cstdio> #include<cstring> ...
- Gentoo安装
Gentoo Linux安装详解--根据官方WiKi整理 时间:2014-06-26 06:37:54 阅读:549 评论:0 收藏:0 [点我收藏+] 标签: ...
- php对提交数据的验证
<?php //security.php /** * @author zhengwei * @copyright 2007 */ /* 函数名称:inject_check() 函数作用:检测提交 ...
- Erlang入门(一)
读erlang.org上面的Erlang Course四天教程1.数字类型,需要注意两点1)B#Val表示以B进制存储的数字Val,比如 7> 2#101.5 二进制存储的101就是10进制的5 ...
- ARM Linux系统的时钟机制
1. Linux下有两类时钟: 1.1 实时钟RTC 它由板上电池驱动的“Real Time Clock”也叫做RTC或者叫CMOS时钟,硬件时钟.当操作系统关机的时候,用这个来记录时间,但是对于运行 ...
- STL序列式容器
1.vector 空间运用的灵活性. 实现技术——关键是对大小的控制以及重新配置时的数据移动效率. 配置新空间.数据移动.释还旧空间 erase(int pos ...
- HDU 1255 覆盖的面积 线段树+扫描线
同 POJ1151 这次是两次 #include <iostream> #include <algorithm> #include <cstdio> #includ ...
- Appium自动化测试环境的搭建及脚本执行
之前搭建了robotium的环境,并使用了一下,因为需要兼顾到ios的测试,所以这次又搭建了appium的环境.关于Appium的介绍网上有很多了,也可以去它的官网学习,这里就不在赘述了. 具体搭建步 ...
- 黑盒测试用例设计方法&理论结合实际 -> 等价类划分
一. 概念 等价类划分法是把程序的输入域划分成若干部分(子集),然后从每个部分中选取少数代表性数据作为测试用例.每一类的代表性数据在测试中的作用等价于这一类中的其他值. 二. 等价类划分的应用 等价类 ...