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;

    
    
    
  • 相关阅读:
    以puppeteer抓取微指数,puppeteer基本示例,docker部署headless
    kubernets基于容器日志的报警和服务自动恢复
    mysql truncate 的问题
    kubernets轻量 contain log 日志收集技巧
    用logstash 作数据的聚合统计
    编译安装 logstash-output-jdbc
    技术沙龙记录1
    javascript的几个知识点scoping,execution context, hoisting, IIFE
    TDD 测试驱动开发
    css及HTML知识点
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5713288.html
Copyright © 2011-2022 走看看