-
首頁(yè)頭部界面
- 效果圖： 其主要分為一個(gè)
ScrollView和一個(gè)圓點(diǎn)指示器的View，和之前我們所制作的輪播圖內(nèi)容有點(diǎn)相似。
HomeTop.gif
- 效果圖： 其主要分為一個(gè)
示例代碼：
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 {
//構(gòu)造
constructor(props) {
super(props);
this.state = {
currentPage : 0, //當(dāng)前頁(yè)碼
};
}
render() {
return (
<View style={styles.container}>
<View>
{/*顯示內(nèi)容部分*/}
<ScrollView
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
//每一幀移動(dòng)結(jié)束
onMomentumScrollEnd={(Scr)=>{this.ScrollEnd(Scr)}}
>
{this.renderScrollViewContent()}
</ScrollView>
{/*顯示圓點(diǎn)指示器部分*/}
<View style={styles.circlestyle}>
{this.renderCircleCount()}
</View>
</View>
</View>
);
}
//ScrollView內(nèi)容
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>
)
}
//返回?cái)?shù)組
return ItemArr;
}
// 返回圓點(diǎn)
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;
}
// 每一幀移動(dòng)結(jié)束之后
ScrollEnd(Scr){
// 水平方向偏移量
const OffSetX = Scr.nativeEvent.contentOffset.x;
// 頁(yè)碼
PageCount = OffSetX / screenW;
// 刷新狀態(tài)機(jī)
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中滑動(dòng)ScrollView設(shè)置內(nèi)容:用ListView組件將所需要的內(nèi)容模式搭建- 效果圖：
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 {
// 數(shù)據(jù)由外部參數(shù)決定
static defaultProps = {
dataArr:[],
}
// 構(gòu)造
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內(nèi)容樣式
scrollEnabled={false} //防止內(nèi)容視圖上下滾動(dòng)
/>
</View>
);
}
//每一個(gè)cell所包含的內(nèi)容。
renderRow(rowData){
return(
<TouchableOpacity activeOpacity={0.8} onPress={()=>{alert('跳轉(zhuǎn)到'+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內(nèi)容樣式搭建完成，則需要在TopView中給TopListView賦予數(shù)據(jù)源
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');
// 導(dǎo)入JSON數(shù)據(jù)
var TopMenu = require('../../LocalData/TopMenu.json');
export default class TopView extends Component {
//構(gòu)造
constructor(props) {
super(props);
this.state = {
currentPage : 0, //當(dāng)前頁(yè)碼
};
}
render() {
return (
<View style={styles.container}>
<View>
{/*顯示內(nèi)容部分*/}
<ScrollView
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
//每一幀移動(dòng)結(jié)束
onMomentumScrollEnd={(Scr)=>{this.ScrollEnd(Scr)}}
>
{this.renderScrollViewContent()}
</ScrollView>
{/*顯示圓點(diǎn)指示器部分*/}
<View style={styles.circlestyle}>
{this.renderCircleCount()}
</View>
</View>
</View>
);
}
//ScrollView內(nèi)容
renderScrollViewContent(){
var ItemArr = [];
// 數(shù)據(jù)
var DataArr = TopMenu.data;
for (var i =0; i<DataArr.length;i++){
ItemArr.push(
<TopListView key = {i}
// 傳入dataSource數(shù)據(jù)
dataArr = {DataArr[i]}
/>
)
}
//返回?cái)?shù)組
return ItemArr;
}
// 返回圓點(diǎn)
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;
}
// 每一幀移動(dòng)結(jié)束之后
ScrollEnd(Scr){
// 水平方向偏移量
const OffSetX = Scr.nativeEvent.contentOffset.x;
// 頁(yè)碼
PageCount = OffSetX / screenW;
// 刷新狀態(tài)機(jī)
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;
-
首頁(yè)中間界面
- 界面分析：
Snip20171001_1.png
中間內(nèi)容界面 主要分為左側(cè)
名店搶購(gòu)視圖 和右側(cè)兩個(gè)小的特價(jià)視圖，并且在整個(gè)界面中右側(cè)天天特價(jià)這兩個(gè)綠色框的視圖，內(nèi)容模式布局基本一樣，所以我們可以將其自定成一個(gè)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:'', // 標(biāo)題
subTitle:'', // 子標(biāo)題
rightIcon:'', // 右側(cè)圖片
titleColor:'' // 字體顏色
}
render() {
return (
<TouchableOpacity activeOpacity={0.8} onPress={()=>{alert('跳轉(zhuǎn)到相關(guān)界面')}}>
<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組件的完成，則需要在外部給其數(shù)據(jù).
renderRightView(){
var RightArr = [];
// 右側(cè)視圖數(shù)據(jù)
var RightData = MiddleJSON.dataRight;
for(var i = 0;i < RightData.length;i++){
// 拿到每一條數(shù)據(jù)
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',
},
- 右側(cè)視圖的數(shù)據(jù)已拿到，接下來(lái)則需要完成左側(cè)視圖的數(shù)據(jù)以及布局
- 示例代碼：
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');
// 導(dǎo)入數(shù)據(jù)
var MiddleJSON = require('../../LocalData/HomeTopMiddleLeft.json');
export default class HomeMiddleView extends Component {
render() {
return (
<View style={styles.container}>
{/*左側(cè)視圖*/}
{this.renderLeftView()}
{/*右側(cè)視圖*/}
<View>
{this.renderRightView()}
</View>
</View>
);
}
renderLeftView(){
//拿到左側(cè)視圖數(shù)據(jù)
var LeftData = MiddleJSON.dataLeft[0];
return(
<TouchableOpacity activeOpacity={0.8} onPress={()=>{alert('跳轉(zhuǎn)界面!!')}}>
<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 = [];
// 右側(cè)視圖數(shù)據(jù)
var RightData = MiddleJSON.dataRight;
for(var i = 0;i < RightData.length;i++){
// 拿到每一條數(shù)據(jù)
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,
//圖片內(nèi)容模式
resizeMode:'contain',
},
});
module.exports = HomeMiddleView;
- 運(yùn)行效果圖：
MIddleView.gif
- 中間內(nèi)容·下半部分·內(nèi)容
-
HomeMiddleBottomView中分為上下兩部分內(nèi)容，首先我們將之前封裝好的MiddleCommonView部分先完善，在此處注意右側(cè)圖片的URL (http://p0.meituan.net/w.h/groupop/9aa35eed64db45aa33f9e74726c59d938450.png)中的w.h，這是由前端提供圖片的寬高給后臺(tái)，后臺(tái)再返回相應(yīng)尺寸的圖片給前端。 - 運(yùn)行效果圖：
-
MIddleBottomView.gif
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
//導(dǎo)入組件
var MiddleCommonView = require('./MiddleCommonView');
// 導(dǎo)入json數(shù)據(jù)
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>
);
}
//下部分的所有數(shù)據(jù)
renderBottomItems(){
var ItemArr = [];
// 拿到數(shù)據(jù)
var ItemData = JsonData.data;
for(var i = 0; i < ItemData.length;i++){
//拿出單條數(shù)據(jù)
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;
}
// 處理圖像的尺寸,因?yàn)楹笃诘慕涌谛枰岸朔祷匾粋€(gè)圖片大小才給符合尺寸的圖片接口。
DealWithImageUrl(url){
//檢查url中是否包含'w.h'這兩個(gè)字符
if (url.search('w.h') == -1) { // -1 標(biāo)示沒有找到,正常返回
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;
-
購(gòu)物中心模塊搭建
Snip20171002_2.png
購(gòu)物中心模塊 主要分為綠的框的section和下面藍(lán)色框的cell兩個(gè)部分，因section部分在本界面中需要用到場(chǎng)合較多，所以先封裝成一個(gè)組件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}>
{/*左側(cè)視圖*/}
<View style={styles.LeftViewStyles}>
<Image source={{uri:this.props.leftIcon}} style={styles.LeftIconStyle}/>
<Text style={{fontSize:17}}>{this.props.leftTitle}</Text>
</View>
{/*右側(cè)視圖*/}
<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組件的封裝，則進(jìn)行下面的內(nèi)容開發(fā)，內(nèi)容部分是一個(gè)ScrollView上有幾個(gè)Item展示，所以先新建一個(gè)ShopCenterItem類：class ShopItems extends React.Component，另外注意一點(diǎn)則是detailurl商品詳情頁(yè)面的url上傳到購(gòu)物中心界面 popToShopCenter再由購(gòu)物中心界面 popToShopCenter上傳到首頁(yè) popToHomeView
Snip20171002_4.png
- 示例代碼:
- 購(gòu)物中心模塊代碼：
HJShopCenter
- 購(gòu)物中心模塊代碼：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
Image,
TouchableOpacity,
} from 'react-native';
// 導(dǎo)入組件
var CellsSection = require('./HJCellsSectionView');
// 引入外部的json數(shù)據(jù)
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 = '購(gòu)物中心'
rightTitle = {HomeJson5.tips}
/>
{/*下面內(nèi)容*/}
<ScrollView style={styles.scrollviewStyles}
horizontal={true}
showsHorizontalScrollIndicator={false}
>
{this.renderAllItems()}
</ScrollView>
</View>
);
}
// 返回下半部分所有的Item
renderAllItems(){
var ItemArr = [];
// 拿到數(shù)據(jù)
var ItemsData = HomeJson5.data;
for(var i = 0; i < ItemsData.length;i++){
// 取出每一條數(shù)據(jù)
var Itemdata = ItemsData[i];
ItemArr.push(
<ShopItems key={i}
shopImage={Itemdata.img}
shopSale={Itemdata.showtext.text}
shopName={Itemdata.name}
detailurl = {Itemdata.detailurl}
// 回調(diào)函數(shù)
popToShopCenter={(url)=>this.popToHome(url)}
/>
)
}
return ItemArr;
}
// 往Home界面上傳參數(shù)
popToHome(url){
if(this.props.popToHomeView == null) return;
// 執(zhí)行回調(diào)函數(shù)
this.props.popToHomeView(url)
}
}
// 每一個(gè)商場(chǎng)的類
class ShopItems extends React.Component {
static defaultProps = {
shopImage:'',
shopSale:'',
shopName:'',
detailurl:'',
//1.往購(gòu)物中心界面上傳
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;
// 執(zhí)行回調(diào)
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首頁(yè)代碼：
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}>
{/*設(shè)置導(dǎo)航條*/}
{this.renderNavBar()}
{/*內(nèi)容模塊*/}
<ScrollView>
{/*頭部視圖*/}
<TopView/>
{/*中間內(nèi)容*/}
<HomeMiddleView />
{/*中間下半部分內(nèi)容*/}
<HomeMiddleBottomView
popTopHome={(data)=>{this.PushDetail(data)}}
/>
{/*購(gòu)物中心*/}
<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('點(diǎn)擊了')}} >
<Image source={{uri:'icon_homepage_message'}} style={styles.navRightImgStyle} />
</TouchableOpacity>
<TouchableOpacity onPress={()=>{alert('點(diǎn)擊了')}} >
<Image source={{uri:'icon_homepage_scan'}} style={styles.navRightImgStyle} />
</TouchableOpacity>
</View>
</View>
)
}
//跳轉(zhuǎn)到詳情頁(yè)面
PushDetail(data){
alert(data)
this.props.navigator.push({
component:HomeDetail, // 要跳轉(zhuǎn)過(guò)去的組件
title:'首頁(yè)詳細(xì)頁(yè)'
});
}
// 跳轉(zhuǎn)到購(gòu)物中心詳情界面
pushToShopCenterDetail(url){
this.props.navigator.push({
component:ShopCenterDetail, // 要跳轉(zhuǎn)過(guò)去的組件
passProps:{'url':this.dealWithUrl(url)} // 需要傳遞數(shù)據(jù)到下一個(gè)界面
});
}
// 對(duì)url數(shù)據(jù)進(jìn)行處理
dealWithUrl(url){
return url.replace('imeituan://www.meituan.com/web/?url=','')
}
}
const styles = StyleSheet.create({
// 導(dǎo)航欄
navBarStyle:{
height:Platform.OS === 'ios' ? 64 : 44,
backgroundColor:'rgba(255,96,0,1)',
// 主軸方向
flexDirection:'row',
// 側(cè)軸對(duì)齊方式 垂直居中
alignItems:'center',
// 主軸對(duì)齊方式
justifyContent:'space-around', // 平均分布
},
// 導(dǎo)航條左側(cè)文字
leftTitleStyle:{
color:'white',
marginTop:15,
fontSize:20,
},
// 導(dǎo)航欄輸入框
topInputStyle:{
width:width * 0.71,
height:Platform.OS === 'ios' ? 35 : 30,
backgroundColor:'white',
marginTop:Platform.OS === 'ios' ? 18 : 0,
// 圓角
borderRadius:18,
paddingLeft:10,
},
// 導(dǎo)航條右側(cè)視圖
rightNavViewStyle:{
flexDirection:'row',
height:64,
// 側(cè)軸對(duì)齊方式
alignItems:'center',
marginTop:15,
},
// 導(dǎo)航欄右側(cè)圖片
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;
- 購(gòu)物中心-商品詳情頁(yè)代碼：
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 上一個(gè)界面?zhèn)鬏斚聛?lái)的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() {
//拿到上級(jí)界面?zhèn)鬏斚聛?lái)的url
//alert(this.props.url);
return (
<View style={styles.container}>
{/*導(dǎo)航欄*/}
{this.renderNavBar()}
{/*加載網(wǎng)頁(yè)*/}
<WebView
automaticallyAdjustContentInsets={true}
source={{'url':this.state.detailUrl}}
javaScriptEnabled={true}
domStorageEnabled={true}
decelerationRate="normal"
startInLoadingState={true}
/>
</View>
);
}
// 導(dǎo)航欄
renderNavBar() {
return(
<View style={styles.NavBatstyle}>
{/*返回按鈕:this.props.navigator.pop() 返回上一級(jí)界面*/}
<TouchableOpacity style={styles.settingPopStyle} onPress={()=>{this.props.navigator.pop()}}>
<Image source={{uri:'icon_camera_back_normal'}} style={styles.ImagesIconStyle}/>
</TouchableOpacity>
<Text style={styles.TitleStyle}>購(gòu)物中心詳情</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下載
-
運(yùn)行項(xiàng)目
- a）打開終端，輸入：cd 項(xiàng)目根目錄 進(jìn)到項(xiàng)目目錄
- b）輸入：npm install，下載node_modules
- c）運(yùn)行在iOS設(shè)備：react-native run-ios
- d）運(yùn)行在Android設(shè)備：react-native run-android
-
