zoukankan      html  css  js  c++  java
  • [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;
  • 相关阅读:
    特征选择方法之信息增益
    6 个优秀的开源 OCR 光学字符识别工具
    Python中type与Object的区别
    Python type类具体的三大分类:metaclasses,classes,instance
    如何去除List中的重复值?
    type,isinstance判断一个变量的数据类型
    Python图形界面开发包 PyGTK
    python使用easygui写图形界面程序
    opencv-python 学习笔记2:实现目光跟随(又叫人脸跟随)
    Tomcat全攻略
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5726176.html
Copyright © 2011-2022 走看看