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;

    
    
    
  • 相关阅读:
    2019年年终总结
    [转]网络基本功08-细说TCP滑动窗口
    anaconda启动报错-pythonw.exe
    FRP+WoL实现远程开机+远程桌面
    [转]网络基本功06-链路聚合
    我的效率工具分享
    比海飞丝更柔顺的写作体验
    阿里云加Picgo或MPic搭建最豪横的图床
    markdown从入门到放弃word和PDF
    Pocket+Evernote 打造个人知识库体系
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5713288.html
Copyright © 2011-2022 走看看