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;

    
    
    
  • 相关阅读:
    Java基础回顾---JVM&JDK&JRE
    学习
    学习
    学习
    进度
    进度
    毕设进度
    学习进度
    Beta阶段项目总结
    第二阶段冲刺——seven
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5713288.html
Copyright © 2011-2022 走看看