在很多app应用型APP中,个人中心往往会单独出一个模块,而对于刚入门React Native的朋友来说,怎么去实现一些静态的页面,并且怎么着手实现,怎么分层,怎么去实现这个架构,我想是很基础的(ps,本人新书,《React Native实战经典》定义国庆前后出版,欢迎大家捧场)。
首先,看一下实现的效果:
项目讲解
首先,这是一个纯静态的页面,包括顶部的个人介绍页面,已经下面的一个扩展页面。而下面扩展页面风格基本差不多,我们可以对其做一个简单的封装(MineItemCell.js),为了项目代码维护的方便,我们还可以将这些样式统一一下(text.js)。
text.js文字样式
- /** * https://github.com/facebook/react-native * @flow */
-
- import React from 'react';
- import ReactNative,{ StyleSheet,Dimensions,Text,ReactElement} from 'react-native';
-
- export function HeadingBig({style,...props}: Object): ReactElement {
- return <Text style={[styles.h0,style]} {...props} />
- }
-
- export function Heading1({style,...props}: Object): ReactElement {
- return <Text style={[styles.h1,style]} {...props} />
- }
-
- export function Heading2({style,...props}: Object): ReactElement {
- return <Text style={[styles.h2,style]} {...props} />
- }
-
- export function Paragraph({style,...props}: Object): ReactElement {
- return <Text style={[styles.p,style]} {...props} />
- }
-
- export function Tip({style,...props}: Object): ReactElement {
- return <Text style={[styles.tip,style]} {...props} />
- }
-
- const styles = StyleSheet.create({
- h0: {
- fontSize: 40,color: '#06C1AE',},h1: {
- fontSize: 15,fontWeight: 'bold',color: '#222222',h2: {
- fontSize: 14,p: {
- fontSize: 13,color: '#777777',tip: {
- fontSize: 13,color: '#999999'
- }
- });
MineItemCell.js
- /** * Copyright (c) 2017-present,Liu Jinyong * All rights reserved. * * https://github.com/huanxsd/MeiTuan * @flow */
-
- import React,{ Component } from 'react';
- import { View,StyleSheet,Image,TouchableOpacity } from 'react-native';
- import { Heading2,Paragraph } from './widght/Text'
- import Separator from './widght/Separator'
-
- var Dimensions = require('Dimensions');
- var ScreenWidth = Dimensions.get('window').width;
-
- class MineItemCell extends Component {
- render() {
- let icon = null;
- if (this.props.image) {
- icon = <Image style={styles.icon} source={this.props.image} />
- }
- return (
- <View style={styles.container}>
- <TouchableOpacity>
- <View style={[styles.content,this.props.style]}>
- {icon}
- <Heading2>{this.props.title}</Heading2>
- <View style={{ flex: 1,backgroundColor: 'blue' }} />
- <Paragraph style={{ color: '#999999' }}>{this.props.subtitle}</Paragraph>
- <Image style={styles.arrow} source={require('./image/icon_arrow.png')} />
- </View>
-
- <Separator />
- </TouchableOpacity>
- </View>
- );
- }
- }
-
- const styles = StyleSheet.create({
- container: {
- backgroundColor: 'white',content: {
- height: 44,flexDirection: 'row',alignItems: 'center',paddingLeft: 15,paddingRight: 10,icon: {
- width: 25,height: 25,marginRight: 10,subtitleContainer: {
- flexDirection: 'row',justifyContent: 'flex-end',arrow: {
- width: 14,height: 14,marginLeft: 5,}
- });
-
- export default MineItemCell;
然后到界面的绘制了,首先绘制顶部个人资料部分:
- renderHeader() { return ( <View style={styles.header}> <View style={styles.topContainer}> <TouchableOpacity> <Image style={[styles.icon, {marginRight: 15}]} source={require('./image/icon_navigationItem_message_white.png')}/> </TouchableOpacity> <TouchableOpacity> <Image style={[styles.icon, {marginRight: 10}]} source={require('./image/icon_navigationItem_set_white.png')}/> </TouchableOpacity> </View> <View style={styles.userContainer}> <Image style={styles.avatar} source={require('./image/avatar.png')}/> <View> <View style={{flexDirection: 'row'}}> <Heading1 style={{color: 'white'}}>code_xzh</Heading1> <Image style={{marginLeft: 4}} source={require('./image/beauty_technician.png')}/> </View> <Paragraph style={{color: 'white',marginTop: 4}}>个人信息 ></Paragraph> </View> </View> </View> ) }
接着,我们在绘制下面的部分,由于下面部分我们队每个子视图做了封装,所以,我们可以这么做:通过getDataList()获取所有的值,进而绘制。
renderCells代码:
- renderCells() {
- let cells = []
- let dataList = this.getDataList()
- for (let i = 0; i < dataList.length; i++) {
- let sublist = dataList[i]
- for (let j = 0; j < sublist.length; j++) {
- let data = sublist[j]
- let cell = <MineItemCell image={data.image} title={data.title} subtitle={data.subtitle}
- key={data.title}/>
- cells.push(cell)
- }
- cells.push(<SpacingView key={i}/>)
- }
-
- return (
- <View style={{flex: 1}}>
- {cells}
- </View>
- )
- }
getDataList()代码:
- getDataList() {
- return (
- [
- [
- {title: '我的钱包',subtitle: '办信用卡',image: require('./image/icon_mine_wallet.png')},{title: '余额',subtitle: '¥95872385',image: require('./image/icon_mine_balance.png')},{title: '抵用券',subtitle: '63',image: require('./image/icon_mine_voucher.png')},{title: '会员卡',subtitle: '2',image: require('./image/icon_mine_membercard.png')}
- ],[
- {title: '好友去哪',image: require('./image/icon_mine_friends.png')},{title: '我的评价',image: require('./image/icon_mine_comment.png')},{title: '我的收藏',image: require('./image/icon_mine_collection.png')},{title: '会员中心',subtitle: 'v15',image: require('./image/icon_mine_mineorder.png')},{title: '积分商城',subtitle: '好礼已上线',image: require('./image/icon_mine_member.png')}
- ],[
- {title: '客服中心',image: require('./image/icon_mine_service.png')},{title: '关于美团',subtitle: '我要合作',image: require('./image/icon_mine_about.png')}
- ]
- ]
- )
- }
- /**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow ScrollView组件
- */
-
- import React,{Component} from 'react';
- import {
- AppRegistry,RefreshControl,ScrollView,TouchableOpacity,View
- } from 'react-native';
- import { Heading1,Heading2,Paragraph } from './widght/Text'
- import MineItemCell from './MineItemCell';
- import SpacingView from './widght/SpacingView'
-
- var Dimensions = require('Dimensions');
- var screenWidth = Dimensions.get('window').width;
- var screenHeight = Dimensions.get('window').height;
-
-
- class MineScene extends Component {
-
- state: {
- isRefreshing: boolean
- }
-
- constructor(props: Object) {
- super(props)
-
- this.state = {
- isRefreshing: false
- }
- }
-
- onHeaderRefresh() {
- this.setState({isRefreshing: true})
-
- setTimeout(() => { this.setState({isRefreshing: false}) },2000); } renderCells() { let cells = [] let dataList = this.getDataList() for (let i = 0; i < dataList.length; i++) { let sublist = dataList[i] for (let j = 0; j < sublist.length; j++) { let data = sublist[j] let cell = <MineItemCell image={data.image} title={data.title} subtitle={data.subtitle} key={data.title}/> cells.push(cell) } cells.push(<SpacingView key={i}/>) } return ( <View style={{flex: 1}}> {cells} </View> ) } renderHeader() { return ( <View style={styles.header}> <View style={styles.topContainer}> <TouchableOpacity> <Image style={[styles.icon,{marginRight: 15}]} source={require('./image/icon_navigationItem_message_white.png')}/> </TouchableOpacity> <TouchableOpacity> <Image style={[styles.icon,{marginRight: 10}]} source={require('./image/icon_navigationItem_set_white.png')}/> </TouchableOpacity> </View> <View style={styles.userContainer}> <Image style={styles.avatar} source={require('./image/avatar.png')}/> <View> <View style={{flexDirection: 'row'}}> <Heading1 style={{color: 'white'}}>code_xzh</Heading1> <Image style={{marginLeft: 4}} source={require('./image/beauty_technician.png')}/> </View> <Paragraph style={{color: 'white',marginTop: 4}}>个人信息 ></Paragraph> </View> </View> </View> ) } getDataList() { return ( [ [ {title: '我的钱包',subtitle: '办信用卡',image: require('./image/icon_mine_wallet.png')},{title: '余额',subtitle: '¥95872385',image: require('./image/icon_mine_balance.png')},{title: '抵用券',subtitle: '63',image: require('./image/icon_mine_voucher.png')},{title: '会员卡',subtitle: '2',image: require('./image/icon_mine_membercard.png')} ],[ {title: '好友去哪',image: require('./image/icon_mine_friends.png')},{title: '我的评价',image: require('./image/icon_mine_comment.png')},{title: '我的收藏',image: require('./image/icon_mine_collection.png')},{title: '会员中心',subtitle: 'v15',image: require('./image/icon_mine_mineorder.png')},{title: '积分商城',subtitle: '好礼已上线',image: require('./image/icon_mine_member.png')} ],[ {title: '客服中心',image: require('./image/icon_mine_service.png')},{title: '关于美团',subtitle: '我要合作',image: require('./image/icon_mine_about.png')} ] ] ) } render() { return ( <View style={styles.container}> <View style={{ position: 'absolute',width: screenWidth,height: screenHeight / 2,backgroundColor: '#06C1AE' }}/> <ScrollView refreshControl={ <RefreshControl refreshing={this.state.isRefreshing} onRefresh={() => this.onHeaderRefresh()} tintColor='gray' /> }> {this.renderHeader()} <SpacingView /> {this.renderCells()} </ScrollView> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,backgroundColor: '#f3f3f3',header: { backgroundColor: '#06C1AE',paddingBottom: 20 },topContainer: { flexDirection: 'row',marginTop: 7,icon: { width: 27,height: 27,userContainer: { flexDirection: 'row',margin: 10,avatar: { width: 50,height: 50,borderRadius: 25,borderWidth: 2,borderColor: '#51D3C6' } }); export default MineScene;
美团项目源码地址:react native美团项目源码