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;

    
    
    
  • 相关阅读:
    t讯src的一点小秘密
    SQL注入科普
    U盘,移动硬盘显示显示需要格式化怎么修复
    Linux提高工作效率的命令
    SpringBoot配置文件加载位置与优先级
    如何选择分布式事务形态(TCC,SAGA,2PC,基于消息最终一致性等等)
    Java IO总结
    Java并发编程指南
    Linux下的crontab定时执行任务命令详解
    Zookeeper的功能以及工作原理
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5713288.html
Copyright © 2011-2022 走看看