mobile / YH_RNComponent · Commits

Go to a project

Authored by 于良
Commit 0b8320a313d1dc07ccb5951a342a58c26af71be2 2 parents 0b067fab 1b4cd685

Merge branch '5.4.1' of http://git.yoho.cn/mobile/YH_RNComponent into 5.4.1 

Conflicts:
	js/common/components/YH_Image.js
	js/home/components/home/Home.js
	js/home/containers/HomeContainer.js
Inline Side-by-side
Showing 5 changed files with 47 additions and 22 deletions
import React from 'react';
import ReactNative from 'react-native';
import {Platform} from 'react-native';
const {
Component,
... ...
... ... @@ -4,11 +4,11 @@ import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';
import SlicedImage from '../../../common/components/SlicedImage';
import YH_Image from '../../../common/components/YH_Image';
import ReactNative, {
View,
Image,
StyleSheet,
Dimensions,
} from 'react-native';
... ... @@ -25,16 +25,16 @@ export default class DivideImage extends Component{
render(){
//测试数据
let rowData = Immutable.fromJS({"template_name":"divideImage","data":[{"src":"http://img11.static.yhbimg.com/yhb-img01/2016/11/24/13/01d93f236d113d1a9f9f93d2163a6b5080.jpg?imageView2/{mode}/w/{width}/h/{height}","alt":"","url":""}],"template_intro":"分隔图","template_id":"113991"});
let url = rowData.get("data").get(0).get("src");
let data = this.props.data;
let url = data.get(0).get("src");
let imageUrl = SlicedImage.getSlicedUrl(url, width, height, 2);
return(
<View style={styles.container}>
<Image style={styles.immage} key={imageUrl} source={{uri: imageUrl}}/>
<YH_Image style={styles.immage} url={imageUrl} />
</View>
);
}
... ...
... ... @@ -3,7 +3,6 @@
import React, {Component} from 'react';
import ReactNative, {
View,
Image,
TouchableOpacity,
StyleSheet,
Dimensions,
... ... @@ -12,6 +11,8 @@ import Immutable, {Map} from 'immutable';
import SlicedImage from '../../../common/components/SlicedImage';
import YH_Image from '../../../common/components/YH_Image';
import HeadTitleCell from '../cell/HeadTitleCell';
/**
... ... @@ -28,10 +29,9 @@ export default class NewProductFloor extends Component{
render(){
//测试数据
let rowData = Immutable.fromJS({"template_name":"NewProductFloor","data":{"title":{"more_name":"...","name":"一周精选","title":"一周精选","more_url":""},"list":[{"src":"http://img11.static.yhbimg.com/yhb-img01/2017/01/20/11/01b18ee60e2e9609033a5ad38efc613c8e.jpg?imageView2/{mode}/w/{width}/h/{height}","title":"","url":"https://feature.yoho.cn/0120/0120FENQI/index.html?title=有货分期&share_id=1439&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"param\":{\"share_id\":\"1439\",\"title\":\"有货分期\"},\"share\":\"/operations/api/v5/webshare/getShare\",\"shareparam\":{\"share_id\":\"1439\"},\"title\":\"有货分期\",\"url\":\"https://feature.yoho.cn/0120/0120FENQI/index.html\"}}"},{"src":"http://img11.static.yhbimg.com/yhb-img01/2016/12/20/17/01f0604dfef7a6cc75b33c62fcb5acdecb.jpg?imageView2/{mode}/w/{width}/h/{height}","title":"","url":"https://m.yohobuy.com/activity/shopCollect?channel_id=3&title=vip新品抢鲜&code=8eea98740b3645cddb41629aa5dbf6ab&share_id=25&tab_name=欧美大牌&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"code\":\"8eea98740b3645cddb41629aa5dbf6ab\",\"param\":{\"share_id\":\"25\",\"code\":\"8eea98740b3645cddb41629aa5dbf6ab\",\"tab_name\":\"欧美大牌\",\"title\":\"vip新品抢鲜\",\"channel_id\":\"3\"},\"tab_name\":\"欧美大牌\",\"share\":\"/operations/api/v5/webshare/getShare\",\"shareparam\":{\"share_id\":\"25\"},\"title\":\"vip新品抢鲜\",\"channel_id\":\"3\",\"url\":\"https://m.yohobuy.com/activity/shopCollect\"}}"},{"src":"http://img11.static.yhbimg.com/yhb-img01/2016/12/20/17/011c7324b07161859654c6bc512cc2bc21.jpg?imageView2/{mode}/w/{width}/h/{height}","title":"","url":"https://feature.yoho.cn/0124/0124PINPAIBOY/index.html?title=精选潮牌专场&share_id=1607&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"param\":{\"share_id\":\"1607\",\"title\":\"精选潮牌专场\"},\"share\":\"/operations/api/v5/webshare/getShare\",\"shareparam\":{\"share_id\":\"1607\"},\"title\":\"精选潮牌专场\",\"url\":\"https://feature.yoho.cn/0124/0124PINPAIBOY/index.html\"}}"},{"src":"http://img10.static.yhbimg.com/yhb-img01/2016/12/20/17/0113067023a8f323294982d391fc2534eb.jpg?imageView2/{mode}/w/{width}/h/{height}","title":"","url":"https://m.yohobuy.com/activity/shopCollect?channel_id=3&title=vip新品抢鲜&code=8eea98740b3645cddb41629aa5dbf6ab&share_id=25&tab_name=欧美大牌&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"code\":\"8eea98740b3645cddb41629aa5dbf6ab\",\"param\":{\"share_id\":\"25\",\"code\":\"8eea98740b3645cddb41629aa5dbf6ab\",\"tab_name\":\"欧美大牌\",\"title\":\"vip新品抢鲜\",\"channel_id\":\"3\"},\"tab_name\":\"欧美大牌\",\"share\":\"/operations/api/v5/webshare/getShare\",\"shareparam\":{\"share_id\":\"25\"},\"title\":\"vip新品抢鲜\",\"channel_id\":\"3\",\"url\":\"https://m.yohobuy.com/activity/shopCollect\"}}"},{"src":"http://img11.static.yhbimg.com/yhb-img01/2016/12/13/09/01f52bb02ed578eab606cbf402430e7cfe.jpg?imageView2/{mode}/w/{width}/h/{height}","title":"","url":"https://m.yohobuy.com/guang/star/?openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"param\":{},\"url\":\"https://m.yohobuy.com/guang/star/\"}}"}]}});
let title = rowData.get("data").get("title");
let imglst = rowData.get("data").get("list");
let data = this.props.data;
let title = data.get("title");
let imglst = data.get("list");
let leftBigImageUrl = SlicedImage.getSlicedUrl(imglst.get(0).get("src"), leftBigImageWidth, leftBigImageHeight, 2);
let rightSmallTopLeftImageUrl = SlicedImage.getSlicedUrl(imglst.get(1).get("src"), rightSmallImageWidth, rightSmallImageHeight, 2);
... ... @@ -47,27 +47,27 @@ export default class NewProductFloor extends Component{
<TouchableOpacity style={styles.leftBigImageContainer} activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(0).toJS())}>
<Image style={styles.leftBigImage} key={leftBigImageUrl} source={{uri: leftBigImageUrl}}/>
<YH_Image style={styles.leftBigImage} url={leftBigImageUrl}/>
</TouchableOpacity>
<TouchableOpacity style={styles.rightSmallTopLeftImageContainer} activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(1).toJS())}>
<Image style={styles.rightSmallTopLeftImage} key={rightSmallTopLeftImageUrl} source={{uri: rightSmallTopLeftImageUrl}}/>
<YH_Image style={styles.rightSmallTopLeftImage} url={rightSmallTopLeftImageUrl}/>
</TouchableOpacity>
<TouchableOpacity style={styles.rightSmallBottomLeftImageContainer} activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(2).toJS())}>
<Image style={styles.rightSmallBottomLeftImage} key={rightSmallBottomLeftImageUrl} source={{uri: rightSmallBottomLeftImageUrl}}/>
<YH_Image style={styles.rightSmallBottomLeftImage} url={rightSmallBottomLeftImageUrl}/>
</TouchableOpacity>
<TouchableOpacity style={styles.rightSmallTopRightImageContainer} activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(3).toJS())}>
<Image style={styles.rightSmallTopRightImage} key={rightSmallTopRightImageUrl} source={{uri: rightSmallTopRightImageUrl}}/>
<YH_Image style={styles.rightSmallTopRightImage} url={rightSmallTopRightImageUrl}/>
</TouchableOpacity>
<TouchableOpacity style={styles.rightSmallBottomRightImageContainer} activeOpacity={1}
onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(imglst.get(4).toJS())}>
<Image style={styles.rightSmallBottomRightImage} key={rightSmallBottomRightImageUrl} source={{uri: rightSmallBottomRightImageUrl}}/>
<YH_Image style={styles.rightSmallBottomRightImage} url={rightSmallBottomRightImageUrl}/>
</TouchableOpacity>
</View>
</View>
... ...
... ... @@ -22,6 +22,8 @@ import SingleImage from '../floor/SingleImage';
import SingleNameImage from '../floor/SingleNameImage';
import TrendsetterCollocation from '../floor/TrendsetterCollocation';
import KidsBrandCell from '../cell/KidsBrandsCell';
import DivideImage from '../floor/DivideImage';
import NewProductFloor from '../floor/NewProductFloor';
import SmallPic from '../floor/SmallPic';
export default class Home extends Component {
... ... @@ -146,6 +148,21 @@ export default class Home extends Component {
/>
);
}
case 'divideImage': {
let data = rowData.get('data');
return (
<DivideImage data={data}/>
);
}
case 'NewProductFloor': {
let data = rowData.get('data');
return (
<NewProductFloor
data={data}
onPressImageItem={this.props.onPressImageItem}
/>
);
}
default:
return null;
}
... ...
... ... @@ -48,11 +48,13 @@ class HomeContainer extends Component {
constructor(props) {
super(props);
this._onRefresh = this._onRefresh.bind(this);
this._onEndReached = this._onEndReached.bind(this);
this.onRefresh = this.onRefresh.bind(this);
this.onEndReached = this.onEndReached.bind(this);
this.onPressAnnounceItem = this.onPressAnnounceItem.bind(this);
this.onPressSlideItem = this.onPressSlideItem.bind(this);
this.onPressPicItem = this.onPressPicItem.bind(this);
this.onPressImageItem = this.onPressImageItem.bind(this);
this.subscription = NativeAppEventEmitter.addListener(
'ChannelDidChangeEvent',
... ... @@ -75,13 +77,13 @@ class HomeContainer extends Component {
this.subscription && this.subscription.remove();
}
_onRefresh() {
onRefresh() {
InteractionManager.runAfterInteractions(() => {
this.props.actions.fetchFloor();
});
}
_onEndReached() {
onEndReached() {
InteractionManager.runAfterInteractions(() => {
});
... ... @@ -111,6 +113,12 @@ class HomeContainer extends Component {
ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
}
onPressImageItem(data, index=0){
if(data && data.url){
ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(data.url);
}
}
render() {
let {app, home} = this.props;
return (
... ... @@ -120,12 +128,13 @@ class HomeContainer extends Component {
this.home = c;
}}
data={home}
onRefresh={this._onRefresh}
onEndReached={this._onEndReached}
onRefresh={this.onRefresh}
onEndReached={this.onEndReached}
channel={app.channel}
onPressAnnounceItem={this.onPressAnnounceItem}
onPressSlideItem={this.onPressSlideItem}
onPressPicItem={this.onPressPicItem}
onPressImageItem={this.onPressImageItem}
/>
</View>
);
... ...