React Native項目 - ·首頁·界面

  • 首頁頭部界面

    • 效果圖： 其主要分為一個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
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,581評論 25贊 708
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,259評論 4贊 61
  • Swift版本點擊這里歡迎加入QQ群交流: 594119878最新更新日期：18-09-17 About A cu...
    ylgwhyh閱讀 25,573評論 7贊 249
  • 在這個似乎每天過得像在打架一樣的時代， 你會愛上什么樣的城市 會對什么樣的城市有歸屬感呢？ 那所城市是否有你愛的風...
    甜苦瓜閱讀 990評論 27贊 14
  • 今天學習了多態、方法重寫、重寫和隱藏的區別、抽象 多態：不同類型的對象對于同一方法表現出了不同的行為的方式就是多態...
    郭鴻博閱讀 98評論 0贊 0