[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;
原文地址:https://www.cnblogs.com/Answer1215/p/5726176.html