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;
  • 相关阅读:
    Mysql 常用函数(15)- upper 函数
    Mysql 常用函数(14)- lower 函数
    Mysql 常用函数(13)- right 函数
    Mysql 常用函数(12)- left 函数
    Mysql 常用函数(11)- trim 函数
    Mysql 常用函数(10)- strcmp 函数
    Mysql 常用函数(9)- reverse 函数
    Mysql 常用函数(8)- concat 函数
    Mysql 常用函数(7)- length 函数
    影评1|发个以前写的影评《情书》
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5726176.html
Copyright © 2011-2022 走看看