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的更多相关文章

  1. [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 ...

  2. React Native Build Apk

    1 React Native安卓项目打包APK 1.1 产生签名的key 先通过keytool生成key 1 keytool -genkey -v -keystore demo-release-key ...

  3. React Native ——实现一个简单的抓取github上的项目数据列表

    /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React ...

  4. [React Native] Using the WebView component

    We can access web pages in our React Native application using the WebView component. We will connect ...

  5. [RN] 01 - Init: Try a little bit of React Native

    Ref: React Native跨平台移动应用开发 后记:这本书博客味有点浓. 本篇涉及新建工程的若干套路,以及一点语法知识. 创建新工程 (1) 解决的一大核心问题: (2) 使用Javascri ...

  6. React Native微信分享 朋友圈分享 Android/iOS 通用

    超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用   2016/06/16 |  React Native技术文章 |  Sky丶清|  暂无评论 |  1 ...

  7. React Native实现微信分享

    (一)前言 现阶段大家在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋友圈的分享功能. 刚创建的React N ...

  8. [RN] 02 - Overview: React Native Practice of 50 lectures

    观看笔记:零基础 React Native 实战开发视频 50讲 本篇效果:RN入门,整体认识 基本原理 # 1 React到RN # 2 一个简单的例子 /** * Sample React Nat ...

  9. React Native入门指南

    转载自:http://www.jianshu.com/p/b88944250b25 前言 React Native 诞生于 2015 年,名副其实的富二代,主要使命是为父出征,与 Apple 和 Go ...

随机推荐

  1. Missing artifact com.sun:tools:jar:1.5.0的解决方案

    今天在用maven的时候遇到一个问题pom.xml提示Missing artifact com.sun:tools:jar:1.5.0 试过改eclipse的eclipse.ini文件,也试过在ecl ...

  2. bzoj1056: [HAOI2008]排名系统 && 1862: [Zjoi2006]GameZ游戏排名系统

    hash 加上 平衡树(名次树). 这道题麻烦的地方就在于输入的是一个名字,所以需要hash. 这个hash用的是向后探查避免冲突,如果用类似前向星的方式避免冲突,比较难写,容易挂掉,但也速度快些. ...

  3. (转载)关于gcd的8题

    发现其实有关gcd的题目还是挺多的,这里根据做题顺序写出8题. [bzoj2818: Gcd] gcd(x,y)=质数, 1<=x,y<=n的对数 做这题的时候,懂得了一个非常重要的转化: ...

  4. 让memcached和mysql更好的工作

    这次是Fotolog的经验,传说中比Flickr更大的网站,Fotolog在21台服务器上部署了51个memcached实例,总计有254G缓存空间可用,缓存了多达175G的内容,这个数量比很多网站的 ...

  5. Beginning Android 4 Programming Book学习

    Chapter 3 EditText不自动获取焦点,自动获取焦点但不显示软键盘  Page 122-123 只有定义了android:id属性的控件在屏幕翻转后状态才会被持久化  Page 133 C ...

  6. POJ 3177 Redundant Paths 边双(重边)缩点

    分析:边双缩点后,消环变树,然后答案就是所有叶子结点(即度为1的点)相连,为(sum+1)/2; 注:此题有坑,踩踩更健康,普通边双缩短默认没有无向图没有重边,但是这道题是有的 我们看,low数组是我 ...

  7. Uva 796 Critical Links 找桥

    这个题很简单,但是输入有毒,用字符串的我一直RE 然后换成这样瞬间AC #include <stdio.h> #include <string.h> #include < ...

  8. HDU 5624 KK's Reconstruction 最小生成树

    题意:这是bc round 71 div 1 的 1004 直接去看中文题意 分析: 首先,一种合法方案对应了原图的一棵生成树. 我们知道,最小生成树有一个性质是最大边最小. 因此,我们可以枚举生成树 ...

  9. python 遇到 syntaxerror: non-ascii character '/xd6' in file 我 教你解决 (python问题)(转)

    遇到标题上的问题,按照我的解决广方案来吧 ===================================== (一) 用记事本创建一个文件ChineseTest.py,默认ANSI: s = ...

  10. VS2008编写MFC程序--使用opencv2.4()

    开始记录VS2008环境下学习OPENCV2.4 头文件: #pragma once #include "CvvImage.h" #include "opencv/cv. ...