[React Native] Create a component using ScrollView
2016-07-28 02:53
417 查看
To show a list of unchanging data in React Native you can use the scroll view component. In this lesson, we'll
After call goToProfile function in Dashboard:
We create a new component 'Profile.js'
mapthrough 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;
相关文章推荐
- [React Native] Reusable components with required propType
- [React Native] Using the Image component and reusable styles
- 使用reflux进行react组件之间的通信
- react-redux的connect()方法 学习笔记
- React—native+Android环境搭建和开发配置(Mac)
- Netty源码解读(四)Netty与Reactor模式
- ReactNative中iOS和Android的style分开设置教程
- ReactNative中iOS和Android的style分开设置教程
- React学习笔记
- boost asio学习笔记1--Reactor与Proactor模式
- 最新版CocoaPods的使用与安装-以导入ReactiveCocoa框架为例
- react native第三方组件问题
- React Native 开发笔记
- React-Native学习指南
- React-Native笔记
- React和Angular
- 用 React 做出好用的 Switch 组件
- react-native-pullview 下拉刷新的react native组件
- React native的安装与使用
- React-Native for iOS