[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 ...
随机推荐
- git恢复被修改的文件
恢复到最后一次提交的改动: git checkout -- + 需要恢复的文件名 但是,需要注意的是,如果该文件已经 add 到暂存队列中,上面的命令就不灵光喽 需要先让这个文件取消暂存: git r ...
- JSOI2015 R3 退队滚粗了
JSTSC最终落下帷幕,最终还是没能翻盘成功——退队了,遗憾啊,中原得鹿不由人 day0 没啥好说的,我一开始把省常中和常州一中搞混了……,不过常州一中的伙食还是相当良心的,比省常中好 考前感觉状态不 ...
- [原]Unity3D深入浅出 - Shader基础开发
概述 简单来讲,shader是为渲染管线中的特定处理截断提供算法的一段代码.Shader是伴随着可编程渲染管线出现的,开发者可使用Shader对渲染过程加以控制,拥有更大的创作控件,因此Shader的 ...
- vijos p1071新年趣事之打牌
描述 过年的时候,大人们最喜欢的活动,就是打牌了.xiaomengxian不会打牌,只好坐在一边看着. 这天,正当一群人打牌打得起劲的时候,突然有人喊道:“这副牌少了几张!”众人一数,果然是少了.于是 ...
- Cookie设置HttpOnly,Secure,Expire属性
在eclipese中创建Web工程时,有个dynamic web module version选项,首先解释下这个选项的意思: http://stackoverflow.com/questions/3 ...
- 【转】蓝牙ble app开发(三) -- 抓包
原文网址:http://blog.csdn.net/lckj686/article/details/43156617 关于android 蓝牙app开发抓包的重要性在 android 蓝牙ble ap ...
- ubuntu设置ip和dns
装完ubuntu 第一件事情就是连上网,换个源,进行更新操作,但前提条件是要配好ip和dns. 下面把自己配置的过程记录下来,权且当作一份备份,以便不时之需. 一.配置ip ub ...
- C# 中的 ref 和 out 的意义和使用方法
原文C# 中的 ref 和 out 的意义和使用方法 向方法传递一个实参时,对应的形参会用实参的一个副本来初始化,不管形参是值类型(例如 int),可空类型(int?),还是引用类型,这一点都是成立的 ...
- Memcache缓存与Mongodb数据库的优势和应用
先说说自己对 Memcache和Mongodb的一些看法,主要是抛砖引玉了,希望看到大家的意见和补充. Memcache Memcache的优势我觉得总结下来主要体现在: 1) 分布式.可以由10台拥 ...
- C# using SendMessage, problem with WM_COPYDATA z
The final missing piece depends on if you are using any processor, x86 or x64. The details using the ...