码迷,mamicode.com
首页 > 其他好文 > 详细

[React Native] Build a Github Repositories component

时间:2016-08-01 17:15:31      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:

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

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5726176.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!