[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;

 

[React Native] Build a Github Repositories component