zoukankan      html  css  js  c++  java
  • [React Native] Create a component using ScrollView

    To show a list of unchanging data in React Native you can use the scroll view component. In this lesson, we'll map through the data we got back from the Github API, and fill complete ScrollView component for the user profile.

    After call goToProfile function in Dashboard:

        goToProfile(){
            this.props.navigator.push({
                title: 'Profile',
                component: Profile,
                passProps: {userInfo: this.props.userInfo}
            });
        }

    We create a new component 'Profile.js'

    import React, {Component} from 'react';
    import {View, StyleSheet, Text, ScrollView} from 'react-native';
    
    import Badge from './Badge';
    
    const styles = StyleSheet.create({
        container: {
            flex: 1
        },
        buttonText: {
            fontSize: 18,
            color: 'white',
            alignSelf: 'center'
        },
        rowContainer: {
            padding: 10
        },
        rowTitle: {
            color: '#48BBEC',
            fontSize: 16
        },
        rowContent: {
            fontSize: 19
        }
    });
    
    class Profile extends React.Component{
        getRowTitle(userInfo, item){
            item = (item === 'public_repos') ? item.replace('_', ' ') : item;
            return item[0] ? item[0].toUpperCase() + item.slice(1) : item;
        }
        createList(userInfo, topicArr){
            return topicArr.map( (item, index) => {
                if(!userInfo[item]){
                    return <View key={index}></View>
                }else{
                    return (
                        <View style={styles.rowContainer}>
                            <Text style={styles.rowTitle}> {this.getRowTitle(userInfo, item)} </Text>
                            <Text style={styles.rowContent}> {userInfo[item]} </Text>
                        </View>
                    );
                }
            })
        }
        render(){
            const userInfo = this.props.userInfo;
            const topicArr = ['company', 'location', 'followers', 'following', 'email', 'bio', 'public_repos'];
    
            return (
                <ScrollView style={styles.container} >
                    <Badge userInfo={this.props.userInfo} />
                    {this.createList(userInfo, topicArr)}
                </ScrollView>
            );
        }
    }
    
    module.exports = Profile;

    
    
    
  • 相关阅读:
    sqlserver中判断表或临时表是否存在
    Delphi 简单方法搜索定位TreeView项
    hdu 2010 水仙花数
    hdu 1061 Rightmost Digit
    hdu 2041 超级楼梯
    hdu 2012 素数判定
    hdu 1425 sort
    hdu 1071 The area
    hdu 1005 Number Sequence
    hdu 1021 Fibonacci Again
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5713288.html
Copyright © 2011-2022 走看看