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. [转]vs2010 快捷键大全

    vs2010 快捷键大全 VS2010版快捷键 Ctrl+E,D ----格式化全部代码  Ctrl+E,F ----格式化选中的代码  CTRL + SHIFT + B生成解决方案  CTRL + ...

  2. 【MooTools】

    MooTools a compact javascript frameworkhttp://mootools.net/docs/core 30天学会 MooTools 教学(1): 认识MooTool ...

  3. CSS布局中——导航是非常常见的

    导航绝对是页面布局中最常见的,为了不用每次去写,稍微贴个简单的导航模版出来,方便以后使用. <title>CSS菜单</title> <style type=" ...

  4. mkimage的-a 和 –c参数和内核引导

    目录 一.mkimage工具简介二.-a参数与-e参数和内核引导的关系三.实例测试 3.1 -a参数与-e参数相同,可以将内核下载到SDRAM的任何地址,然后从这启动 3.2 -a参数与-e参数不同, ...

  5. ArcGIS.Server.9.3和ArcGIS API for JavaScript地图实现Toorbar功能(四)

    转自:http://www.cnblogs.com/hll2008/archive/2008/11/22/1338630.html 目的:1.ArcGIS API for JavaScript实现To ...

  6. POJ3279 Fliptile 枚举+简单搜索

    题意:一个矩阵,每个点1或0,然后每次翻一个点,它周围上下左右(包括自己)1->0,0->1,问最少翻几次可以矩阵全是0,忽略题目说的字典序 分析:枚举第一行所有的情况,然后下面几行也随之 ...

  7. 手把手教你写对拍程序(PASCAL)

    谁适合看这篇文章? ACMERS,OIERS或其它参加算法竞赛或需要算法的人 对操作系统并不太熟悉的人 不会写对拍的人 在网上找不到一个特别详细的对拍样例的人 不嫌弃我写的太低幼的人 前言 在NOIP ...

  8. powerdesign的license key到期,解决办法

    到2013年9月24日为止我把这文件覆盖了都是行的!不行的请留言说明下! 下载地址:powerdesigner license key 15.1 找到安装目录,直接覆盖就行了!

  9. Python读取文件内容的三种方式并比较

    本次实验的文件是一个60M的文件,共计392660行内容. 程序一: def one(): start = time.clock() fo = open(file,'r') fc = fo.readl ...

  10. OpenCV在Debug和Release两种模式下布恩那个同时运行的问题

    首先,可以肯定的说,两者是可以随时切换进行运行的,若不能运行,必定是配置出了问题 以Debugx64和Releasex64为例: 在Releasex64模式下,我配置好了各种路径: 于是乎,我切换到D ...