React Native项目 - ·首页·界面

作者: 黄晓坚 | 来源:发表于2017-10-03 01:03 被阅读37次

首页头部界面
- 效果图：其主要分为一个ScrollView和一个圆点指示器的View，和之前我们所制作的轮播图内容有点相似。
  HomeTop.gif
示例代码：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    ListView,
} from 'react-native';

//屏幕宽度

var Dimensions = require('Dimensions');
var screenW = Dimensions.get('window').width;


export default class TopView extends Component {

    //构造
    constructor(props) {
      super(props);
      this.state = {

          currentPage : 0,  //当前页码
      };
    }
    render() {
        return (
            <View style={styles.container}>
                <View>
                    {/*显示内容部分*/}
                    <ScrollView
                        horizontal={true}
                        pagingEnabled={true}
                        showsHorizontalScrollIndicator={false}
                        //每一帧移动结束
                        onMomentumScrollEnd={(Scr)=>{this.ScrollEnd(Scr)}}

                    >
                        {this.renderScrollViewContent()}
                    </ScrollView>

                    {/*显示圆点指示器部分*/}
                    <View style={styles.circlestyle}>
                        {this.renderCircleCount()}
                    </View>
                </View>

            </View>
        );
    }
    //ScrollView内容
    renderScrollViewContent(){

        var ItemArr = [];

        var ColorArr = ['red','blue'];

        for (var i =0; i<ColorArr.length;i++){

            ItemArr.push(
                <View key = {i} style={{width:screenW,height:150,backgroundColor:ColorArr[i]}}>
                    <Text>{i}</Text>
                </View>
            )
        }
        //返回数组
     return ItemArr;

    }

    // 返回圆点
    renderCircleCount(){

        var CirclArr = [];
        //样式
        var style;

        for(var i = 0;i < 2;i++){

            style = (i == this.state.currentPage) ? {color:'orange'} : {color:'gray'};

            CirclArr.push(
                <Text key = {i} style={[{fontSize:25},style]}>•</Text>
            )
        }
    return CirclArr;
    }
     // 每一帧移动结束之后
    ScrollEnd(Scr){
        // 水平方向偏移量
        const OffSetX = Scr.nativeEvent.contentOffset.x;
        // 页码
        PageCount = OffSetX / screenW;

        // 刷新状态机
        this.setState ({

            currentPage : PageCount

        })


    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,

        backgroundColor: '#F5FCFF',
    },

    circlestyle: {
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'rgba(255,255,90,0.1)'
    },

});

module.exports = TopView;

给TopView中滑动ScrollView设置内容:用ListView组件将所需要的内容模式搭建
- 效果图：

TopCells.gif

示例代码：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    TouchableOpacity,
    Platform
} from 'react-native';

//屏幕宽度

var Dimensions = require('Dimensions');
var kWidth = Dimensions.get('window').width;
// 全局常量
const cols = 5
const cellW = Platform.OS == 'ios' ? 70 : 60;
const cellH = 70;
const vMargin = (kWidth - cellW * cols) / (cols + 1);

export default class TopListView extends Component {

    // 数据由外部参数决定
     static defaultProps = {

             dataArr:[],
     }
    // 构造
    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {

            dataSource: ds.cloneWithRows(this.props.dataArr)

        }
    }

    render() {
        return (
            <View style={styles.container}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}
                    contentContainerStyle={styles.contentViewStyle} //ListView内容样式
                    scrollEnabled={false}  //防止内容视图上下滚动
                />



            </View>
        );
    }

    //每一个cell所包含的内容。
    renderRow(rowData){
        return(

           <TouchableOpacity activeOpacity={0.8} onPress={()=>{alert('跳转到'+rowData.title+'界面')}}>
               <View style={styles.cellStyle}>
                   <Image source={{uri:rowData.image}} style={{width:52,height:52}}/>
                   <Text style={styles.titleStyle}>{rowData.title}</Text>
               </View>
           </TouchableOpacity>
        )


    }
}

const styles = StyleSheet.create({

    contentViewStyle: {
        flexDirection:'row',
        flexWrap:'wrap',
        width:kWidth,
        alignItems:'center',
        justifyContent:'center',
    },

    cellStyle: {
        alignItems:'center',
        justifyContent:'center',
        marginTop:10,
        width:cellW,
        height:cellH,
        marginLeft:vMargin,
    },

    titleStyle: {
       color:'gray',
       fontSize:Platform.OS == 'ios' ? 14 : 12,
    },
});

module.exports = TopListView;

TopListView内容样式搭建完成，则需要在TopView中给TopListView赋予数据源

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    ListView,
} from 'react-native';

//屏幕宽度
var Dimensions = require('Dimensions');
var screenW = Dimensions.get('window').width;


var TopListView = require('./TopListView');

// 导入JSON数据
var TopMenu = require('../../LocalData/TopMenu.json');

export default class TopView extends Component {

    //构造
    constructor(props) {
      super(props);
      this.state = {

          currentPage : 0,  //当前页码
      };
    }
    render() {
        return (
            <View style={styles.container}>
                <View>
                    {/*显示内容部分*/}
                    <ScrollView
                        horizontal={true}
                        pagingEnabled={true}
                        showsHorizontalScrollIndicator={false}
                        //每一帧移动结束
                        onMomentumScrollEnd={(Scr)=>{this.ScrollEnd(Scr)}}

                    >
                        {this.renderScrollViewContent()}
                    </ScrollView>

                    {/*显示圆点指示器部分*/}
                    <View style={styles.circlestyle}>
                        {this.renderCircleCount()}
                    </View>
                </View>

            </View>
        );
    }
    //ScrollView内容
    renderScrollViewContent(){

        var ItemArr = [];

        // 数据
        var DataArr = TopMenu.data;

        for (var i =0; i<DataArr.length;i++){

            ItemArr.push(
                <TopListView key = {i}
                    // 传入dataSource数据
                    dataArr = {DataArr[i]}

                />
            )
        }
        //返回数组
     return ItemArr;

    }

    // 返回圆点
    renderCircleCount(){

        var CirclArr = [];
        //样式
        var style;

        for(var i = 0;i < TopMenu.data.length;i++){

            style = (i == this.state.currentPage) ? {color:'orange'} : {color:'gray'};

            CirclArr.push(
                <Text key = {i} style={[{fontSize:25},style]}>•</Text>
            )
        }
    return CirclArr;
    }
     // 每一帧移动结束之后
    ScrollEnd(Scr){
        // 水平方向偏移量
        const OffSetX = Scr.nativeEvent.contentOffset.x;
        // 页码
        PageCount = OffSetX / screenW;

        // 刷新状态机
        this.setState ({

            currentPage : PageCount

        })


    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,

        backgroundColor: '#F5FCFF',
    },

    circlestyle: {
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'rgba(255,255,255,0.1)'
    },

});

module.exports = TopView;

首页中间界面
- 界面分析：

Snip20171001_1.png
中间内容界面主要分为左侧名店抢购视图和右侧两个小的特价视图，并且在整个界面中右侧天天特价这两个绿色框的视图，内容模式布局基本一样，所以我们可以将其自定成一个MiddleCommonView组件

示例代码：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    AlertIOS,

} from 'react-native';

var Dimensions = require('Dimensions');
var kWidth = Dimensions.get('window').width;

export default class MiddleCommonView extends Component {

    static defaultProps = {

        title:'',        // 标题
        subTitle:'',     // 子标题
        rightIcon:'',    // 右侧图片
        titleColor:''   //  字体颜色
    }



    render() {
        return (
         <TouchableOpacity activeOpacity={0.8} onPress={()=>{alert('跳转到相关界面')}}>
             <View style={styles.container}>
                {/*左边*/}
               <View>
                  <Text style={[{color:this.props.titleColor},styles.titlesStyle]}>{this.props.title}</Text>
                  <Text style={styles.SubTitleStyle}>{this.props.subTitle}</Text>
               </View>
                {/*右边图片*/}
                <Image source={{uri:this.props.rightIcon}} style={styles.iconStyles}/>
            </View>
         </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        width:kWidth * 0.5 - 1,
        height:59,
        marginBottom:1,
        //改变主轴方向
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-around',
    },
    titlesStyle: {
        fontSize:20,
        fontWeight:'bold',
    },
    SubTitleStyle: {
        color:'gray',
    },
    iconStyles: {
        width:64,
        height:44,
    },
});

module.exports = MiddleCommonView;

MiddleCommonView组件的完成，则需要在外部给其数据.


    renderRightView(){

        var RightArr = [];
        // 右侧视图数据
        var RightData = MiddleJSON.dataRight;

        for(var i = 0;i < RightData.length;i++){
            // 拿到每一条数据
            var OneRightData = RightData[i];

            RightArr.push(
                <MiddleCommonView key = {i}

                    title={OneRightData.title}
                    subTitle={OneRightData.subTitle}
                    rightIcon={OneRightData.rightImage}
                    titleColor={OneRightData.titleColor}
                />
            )
        }

        return RightArr;
    }
}

const styles = StyleSheet.create({
    container: {

        marginTop:15,

        flexDirection:'row',

    },

右侧视图的数据已拿到，接下来则需要完成左侧视图的数据以及布局
- 示例代码：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    AlertIOS,
} from 'react-native';

var Dimensions = require('Dimensions');
var kWidth = Dimensions.get('window').width;


var MiddleCommonView = require('./MiddleCommonView');

// 导入数据

var MiddleJSON = require('../../LocalData/HomeTopMiddleLeft.json');

export default class HomeMiddleView extends Component {
    render() {
        return (
            <View style={styles.container}>
                {/*左侧视图*/}
                    {this.renderLeftView()}

                {/*右侧视图*/}
                <View>
                    {this.renderRightView()}
                </View>
            </View>
        );
    }

    renderLeftView(){

        //拿到左侧视图数据
        var LeftData = MiddleJSON.dataLeft[0];
        return(
           <TouchableOpacity activeOpacity={0.8} onPress={()=>{alert('跳转界面!!')}}>
            <View style={styles.LeftViewStyle}>
                     <Image source={{uri:LeftData.img1}} style={styles.leftImageStyle}/>
                     <Image source={{uri:LeftData.img2}} style={styles.leftImageStyle}/>
                     <Text style={{color:'gray', fontSize:15,}}>{LeftData.title}</Text>
                <View style={{flexDirection:'row',marginTop:5,}}>
                    <Text style={{color:'blue',marginRight:5}}>{LeftData.price}</Text>
                    <Text style={{color:'orange',backgroundColor:'yellow'}}>{LeftData.sale}</Text>
                </View>
            </View>
           </TouchableOpacity>
        )
    }


    renderRightView(){

        var RightArr = [];
        // 右侧视图数据
        var RightData = MiddleJSON.dataRight;

        for(var i = 0;i < RightData.length;i++){
            // 拿到每一条数据
            var OneRightData = RightData[i];

            RightArr.push(
                <MiddleCommonView key = {i}

                    title={OneRightData.title}
                    subTitle={OneRightData.subTitle}
                    rightIcon={OneRightData.rightImage}
                    titleColor={OneRightData.titleColor}
                />
            )
        }

        return RightArr;
    }
}

const styles = StyleSheet.create({
    container: {

        marginTop:15,

        flexDirection:'row',

    },

    LeftViewStyle: {
        width:kWidth * 0.5 - 1,
        height:119,
        marginRight:1,
        backgroundColor:'white',
        alignItems:'center',
        justifyContent:'center',


    },
    leftImageStyle: {
        width: 100,
        height:30,

        //图片内容模式
        resizeMode:'contain',
    },
});

module.exports = HomeMiddleView;

运行效果图：

MIddleView.gif

中间内容·下半部分·内容
- HomeMiddleBottomView中分为上下两部分内容，首先我们将之前封装好的MiddleCommonView部分先完善，在此处注意右侧图片的URL (http://p0.meituan.net/w.h/groupop/9aa35eed64db45aa33f9e74726c59d938450.png)中的w.h，这是由前端提供图片的宽高给后台，后台再返回相应尺寸的图片给前端。
- 运行效果图：

MIddleBottomView.gif

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

//导入组件
var MiddleCommonView = require('./MiddleCommonView');

// 导入json数据
var JsonData = require('../../LocalData/XMG_Home_D4.json');


export default class HomeMiddleBottomView extends Component {
    render() {
        return (
            <View style={styles.container}>
                {/*上部分*/}
                <View style={styles.topViewStyle}>

                </View>
                {/*下部分*/}
                <View style={styles.bottomViewStyle}>
                    {this.renderBottomItems()}
                </View>
            </View>
        );
    }

    //下部分的所有数据
    renderBottomItems(){

        var ItemArr = [];

        // 拿到数据
        var ItemData = JsonData.data;

        for(var i = 0; i < ItemData.length;i++){
            //拿出单条数据
            var OneData = ItemData[i];

            ItemArr.push(
                <MiddleCommonView key ={i}
                     title={OneData.maintitle}
                     subTitle={OneData.deputytitle}
                     rightIcon={this.DealWithImageUrl(OneData.imageurl)}
                     titleColor={OneData.typeface_color}
                />
            )
        }
        return ItemArr;

    }

    // 处理图像的尺寸,因为后期的接口需要前端返回一个图片大小才给符合尺寸的图片接口。
    DealWithImageUrl(url){
        //检查url中是否包含'w.h'这两个字符
        if (url.search('w.h') == -1) { // -1 标示没有找到,正常返回
            return url;
        }else {                        // 找到了 则替换用图片的宽高替换'w.h'
            return url.replace('w.h','120.90');
        }
    }

}

const styles = StyleSheet.create({
    container: {
        marginTop:15,
    },

    topViewStyle: {


    },

    bottomViewStyle: {
        flexDirection:'row',
        alignItems:'center',
        flexWrap:'wrap',
        //justifyContent:'space-around',
    },

});

module.exports = HomeMiddleBottomView;

购物中心模块搭建

Snip20171002_2.png
购物中心模块主要分为绿的框的section和下面蓝色框的cell两个部分，因section部分在本界面中需要用到场合较多，所以先封装成一个组件HJCellsSectionView

示例代码：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,

} from 'react-native';

export default class HJCellsSectionView extends Component {

    static defaultProps = {

        leftIcon:'',
        leftTitle:'',
        rightTitle:'',

    }

    render() {
        return (
            <View style={styles.container}>
               {/*左侧视图*/}
               <View style={styles.LeftViewStyles}>
                   <Image source={{uri:this.props.leftIcon}} style={styles.LeftIconStyle}/>
                   <Text style={{fontSize:17}}>{this.props.leftTitle}</Text>
               </View>
               {/*右侧视图*/}
                <View style={styles.RightViewStyles}>
                    <Text style={{fontSize:14, color:'gray'}}>{this.props.rightTitle}</Text>
                    <Image source={{uri:'icon_cell_rightArrow'}} style={styles.rightIconStyle}/>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor:'white',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',

        height:44,

        borderBottomColor:'#e8e8e8',
        borderBottomWidth:0.5,
    },

    LeftViewStyles: {
        flexDirection:'row',
        alignItems:'center',
    },
    LeftIconStyle: {
        width:30,
        height:30,
        marginRight:5,
        marginLeft:8,
        resizeMode:'contain'
    },
    RightViewStyles: {
        flexDirection:'row',
        alignItems:'center',
    },

    rightIconStyle: {
        width:8,
        height:16,
        marginRight:5,
        marginLeft:8,
    },
});

module.exports = HJCellsSectionView;

完成section组件的封装，则进行下面的内容开发，内容部分是一个ScrollView上有几个Item展示，所以先新建一个ShopCenterItem类：class ShopItems extends React.Component，另外注意一点则是detailurl商品详情页面的url上传到购物中心界面 popToShopCenter再由购物中心界面 popToShopCenter上传到首页 popToHomeView

Snip20171002_4.png

示例代码:
- 购物中心模块代码： HJShopCenter

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image,
    TouchableOpacity,
} from 'react-native';

// 导入组件
var CellsSection = require('./HJCellsSectionView');

// 引入外部的json数据
var HomeJson5 = require('../../LocalData/XMG_Home_D5.json');

export default class HJShopCenter extends Component {

    static defaultProps = {
        // 2.往Home界面上传
        popToHomeView:null,
    }

    render() {
        return (
            <View style={styles.container}>
                {/*CellSection*/}
                <CellsSection
                    leftIcon = 'gw'
                    leftTitle = '购物中心'
                    rightTitle = {HomeJson5.tips}
                />
                {/*下面内容*/}
                <ScrollView style={styles.scrollviewStyles}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}

                >
                    {this.renderAllItems()}
                </ScrollView>
            </View>
        );
    }
    // 返回下半部分所有的Item
    renderAllItems(){

        var ItemArr = [];
        // 拿到数据
        var ItemsData = HomeJson5.data;
        for(var i = 0; i < ItemsData.length;i++){
            // 取出每一条数据
            var Itemdata = ItemsData[i];

            ItemArr.push(
                <ShopItems key={i}

                    shopImage={Itemdata.img}
                    shopSale={Itemdata.showtext.text}
                    shopName={Itemdata.name}
                    detailurl = {Itemdata.detailurl}
                     // 回调函数
                    popToShopCenter={(url)=>this.popToHome(url)}

                />
            )
        }
        return ItemArr;
    }

    // 往Home界面上传参数
    popToHome(url){
      if(this.props.popToHomeView == null) return;
        // 执行回调函数
       this.props.popToHomeView(url)
    }
}

// 每一个商场的类
class ShopItems extends React.Component {

    static defaultProps = {

        shopImage:'',
        shopSale:'',
        shopName:'',
        detailurl:'',
        //1.往购物中心界面上传
        popToShopCenter:null,

    }

    render(){
        return(
            <TouchableOpacity activeOpacity={0.5} onPress={()=>{this.clickItem(this.props.detailurl)}}>
                <View style={styles.ItmeStyle}>
                    <Image source={{uri:this.props.shopImage}} style={styles.imageStyles}/>
                    <Text style={styles.shopSaleStyle}>{this.props.shopSale}</Text>
                    <Text>{this.props.shopName}</Text>
                </View>
            </TouchableOpacity>
        )
    }

    clickItem(url){
       if (this.props.detailurl == null ) return;
        // 执行回调
        this.props.popToShopCenter(url)
    }
}

const styles = StyleSheet.create({
    container: {

        marginTop:15,
    },
    scrollviewStyles: {

        flexDirection:'row',
        backgroundColor:'white',
        padding:10,

    },
    ItmeStyle:{
        marginRight:8,
        alignItems:'center'
    },
    imageStyles: {
        width:120,
        height:100,
        resizeMode:'contain',
        borderRadius:15,

    },
    shopSaleStyle: {

        backgroundColor:'orange',
        position:'absolute',
        left:0,
        bottom:30,
        color:'white',
        paddingLeft:8,

    },
    shopNameStyle: {

        textAlign:'center', //文字居中
        marginTop:3,
    },
});

module.exports = HJShopCenter;

HomeView首页代码：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    TextInput,
    Image,
    Platform,
    AlertIOS,
    ScrollView,

} from 'react-native';

var  HomeDetail = require('./HomeDetail');
var TopView = require('./TopView');

var HomeMiddleView = require('./HomeMiddleView');
var HomeMiddleBottomView = require('./HomeMiddleBottomView');

var ShopCenter = require('./HJShopCenter');
var ShopCenterDetail = require('./HJShopCenterDetail');

var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get('window');

export default class HJHome extends Component {

    render() {
        return (
            <View style={styles.container}>
                {/*设置导航条*/}
                {this.renderNavBar()}
                {/*内容模块*/}
              <ScrollView>
                  {/*头部视图*/}
                  <TopView/>
                  {/*中间内容*/}
                  <HomeMiddleView />
                  {/*中间下半部分内容*/}
                  <HomeMiddleBottomView
                      popTopHome={(data)=>{this.PushDetail(data)}}
                  />
                  {/*购物中心*/}
                   <ShopCenter
                       popToHomeView = {(url)=>this.pushToShopCenterDetail(url)}
                   />
              </ScrollView>
            </View>
        );
    }
    renderNavBar(){
        return(
            <View style={styles.navBarStyle}>
                <TouchableOpacity onPress={()=>{this.PushDetail()}} >
                    <Text style={styles.leftTitleStyle}>杭州</Text>
                </TouchableOpacity>
                <TextInput placeholder="输入商家,品类,商圈" style={styles.topInputStyle} />
                <View style={styles.rightNavViewStyle}>
                    <TouchableOpacity onPress={()=>{alert('点击了')}} >
                        <Image source={{uri:'icon_homepage_message'}} style={styles.navRightImgStyle} />
                    </TouchableOpacity>
                    <TouchableOpacity onPress={()=>{alert('点击了')}} >
                        <Image source={{uri:'icon_homepage_scan'}} style={styles.navRightImgStyle} />
                    </TouchableOpacity>
                </View>
            </View>
        )
    }

    //跳转到详情页面
    PushDetail(data){
            alert(data)
        this.props.navigator.push({

            component:HomeDetail,   // 要跳转过去的组件
            title:'首页详细页'
        });

    }
    // 跳转到购物中心详情界面
    pushToShopCenterDetail(url){
        this.props.navigator.push({

            component:ShopCenterDetail,   // 要跳转过去的组件
            passProps:{'url':this.dealWithUrl(url)}         // 需要传递数据到下一个界面
        });
    }
    // 对url数据进行处理
    dealWithUrl(url){
        return url.replace('imeituan://www.meituan.com/web/?url=','')
    }
}

const styles = StyleSheet.create({

    // 导航栏
    navBarStyle:{
        height:Platform.OS === 'ios' ? 64 : 44,
        backgroundColor:'rgba(255,96,0,1)',
        // 主轴方向
        flexDirection:'row',
        // 侧轴对齐方式 垂直居中
        alignItems:'center',
        // 主轴对齐方式
        justifyContent:'space-around', // 平均分布
    },
    // 导航条左侧文字
    leftTitleStyle:{
        color:'white',
        marginTop:15,
        fontSize:20,
    },
    // 导航栏输入框
    topInputStyle:{
        width:width * 0.71,
        height:Platform.OS === 'ios' ? 35 : 30,
        backgroundColor:'white',
        marginTop:Platform.OS === 'ios' ? 18 : 0,
        // 圆角
        borderRadius:18,
        paddingLeft:10,
    },
    // 导航条右侧视图
    rightNavViewStyle:{
        flexDirection:'row',
        height:64,
        // 侧轴对齐方式
        alignItems:'center',
        marginTop:15,

    },
    // 导航栏右侧图片
    navRightImgStyle:{
        width:Platform.OS === 'ios' ? 28 : 24,
        height:Platform.OS === 'ios' ? 28 : 24,
    },
    container: {
        flex: 1,
        backgroundColor: '#e8e8e8',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});

module.exports  = HJHome;

购物中心-商品详情页代码：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    Platform,
    WebView,
} from 'react-native';

export default class HJShopCenterDetail extends Component {

        constructor(props) {
          super(props);
          this.state = {
              //this.props.url 上一个界面传输下来的url。
              detailUrl:this.props.url+'?uuid=5C7B6342814C7B496D836A69C872202B5DE8DB689A2D777DFC717E10FC0B4271&utm_term=6.6&utm_source=AppStore&utm_content=5C7B6342814C7B496D836A69C872202B5DE8DB689A2D777DFC717E10FC0B4271&version_name=6.6&userid=160495643&utm_medium=iphone&lat=23.134709&utm_campaign=AgroupBgroupD100Ghomepage_shoppingmall_detailH0&token=b81UqRVf6pTL4UPLLBU7onkvyQoAAAAAAQIAACQVmmlv_Qf_xR-hBJVMtIlq7nYgStcvRiK_CHFmZ5Gf70DR47KP2VSP1Fu5Fc1ndA&lng=113.373890&f=iphone&ci=20&msid=0FA91DDF-BF5B-4DA2-B05D-FA2032F30C6C2016-04-04-08-38594'

          };
        }

    render() {
        //拿到上级界面传输下来的url
        //alert(this.props.url);

        return (
            <View style={styles.container}>
                {/*导航栏*/}
                {this.renderNavBar()}
                {/*加载网页*/}
                <WebView
                automaticallyAdjustContentInsets={true}
                source={{'url':this.state.detailUrl}}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                decelerationRate="normal"
                startInLoadingState={true}
                />

            </View>
        );
    }

    // 导航栏
    renderNavBar() {

        return(
            <View style={styles.NavBatstyle}>
                {/*返回按钮:this.props.navigator.pop() 返回上一级界面*/}
                <TouchableOpacity style={styles.settingPopStyle} onPress={()=>{this.props.navigator.pop()}}>
                    <Image source={{uri:'icon_camera_back_normal'}} style={styles.ImagesIconStyle}/>
                </TouchableOpacity>

                <Text style={styles.TitleStyle}>购物中心详情</Text>

            </View>

        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    NavBatstyle: {
        height:Platform.OS === 'ios' ? 64 : 44,
        backgroundColor:'rgba(255,96,0,1)',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center'

    },
    TitleStyle: {
        color:'white',
        fontSize:20,
    },
    settingPopStyle:{
        position:'absolute',
        left:10,
        bottom:15,
    },
    ImagesIconStyle: {

        width:Platform.OS === 'ios' ? 28 : 24,
        height:Platform.OS === 'ios' ? 28 : 24,
    },

});

module.exports = HJShopCenterDetail;

ShopCenter.gif

Demo下载
- 运行项目
  - a）打开终端，输入：cd 项目根目录进到项目目录
  - b）输入：npm install，下载node_modules
  - c）运行在iOS设备：react-native run-ios
  - d）运行在Android设备：react-native run-android

React Native项目 - ·首页·界面

首页头部界面

首页中间界面

`购物中心`模块搭建

Demo下载

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React Native项目 - ·首页·界面

首页头部界面

首页中间界面

购物中心模块搭建

Demo下载

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

`购物中心`模块搭建