[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;
复制代码

 

posted @   Zhentiw  阅读(195)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2014-08-01 [Backbone]5. Model & View, toggle between Models and Views -- 2
2014-08-01 [Backbone]4. Model & View, toggle between Model and View. -- 1
2014-08-01 [Backbone]3. More detail on View
2014-08-01 [Backbone]2. More detail in Models
2014-08-01 [Backbone]1. Module, View classed
2014-08-01 [Node.js]33. Level 7: Persisting Questions
点击右上角即可分享
微信分享提示