[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 ...
随机推荐
- 最短路径(Floyd 模板题)
题目:http://acm.sdut.edu.cn/sdutoj/showproblem.php?pid=2143&cid=1186 #include<stdio.h> #incl ...
- Notepad++加上xml格式化的功能
工作中需要用代码创建一个XML文件,创建完发现XML内容都处在同一行,导致非常不容易查看清楚XML代码.于是习惯性地用 Notepad++查看,想用它来对XML代码格式化一下. 于是找到了TextFX ...
- toastr
$(function(){ //参数设置,若用默认值可以省略以下面代 toastr.options = { "closeButton": false ...
- 关于触发器、存储过程和DBlink的综合运用 (转)
关于触发器.存储过程和DBlink的综合运用 需求描述: 需要在两个不同oracl数据库实例中进行数据逻辑处理.如果A实例中的表有新数据插入或者数据更新,那么在B实例中执行与之相关的存储过程. 先假设 ...
- 【windows核心编程】 第六章 线程基础
Windows核心编程 第六章 线程基础 欢迎转载 转载请注明出处:http://www.cnblogs.com/cuish/p/3145214.html 1. 线程的组成 ① 一个是线程的内核 ...
- cocos2d-x 2.x版本中,场景切换各方法调用顺序
假设从A场景切换到B场景,调用各场景方法的顺序为: 如果没有切换效果(transition),则先调用B的init(),再调用A的onExitTransitionStart(),接着调用A的onExi ...
- CSLA.NET 简介
CSLA.NET 据说在国外用的很多,国内介绍这个框架的文章目前网络上能找到的比较早,大多是早期的一些版本的版本的介绍.目前最新版的4.5.6 .版本的整体架构已经有了很大的变化.拟开一个系列,结合〈 ...
- bzoj 1834 [ZJOI2010]network 网络扩容(MCMF)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1834 [题意] 给定一个有向图,每条边有容量C,扩容费用W,问最大流和使容量增加K的最 ...
- uvalive 4795 Paperweight
题意:给出一个5个顶点的多面体以及多面体内一点P.求让 多面体不同的方式(即以不同的面)放在地面上,设这个着地的面为A,多面体重心在A上的投影为B,在保证B在A内部且距离A的各个边界不小于0.2的前提 ...
- uvalive 4973 Ardenia
题意:给出空间两条线段,求距离. 注意输出格式! #include<cstdio> #include<cmath> #include<algorithm> usin ...