react-native子组件向父组件传递值，需要三个操作
1.定义回调函数
getDefaultProps(){
// 回调函数
return{
popToHomeView: null
}
}
2.调用函数
<ShopCenterItem
popTopShopCenter = {(url)=>this.popTopHome(url)}
/>
3.实现回调函数
popTopHome(url){
// 判断
if (this.props.popToHomeView == null) return;
// 执行回调函数
this.props.popToHomeView(url);
}
在子组件操作完以后，在父组件中就可以获取到子组件中的值了
<ShopCenter
popToHomeView = {(url) => this.pushToShopCenterDetail(url)} />XMGHome.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
TextInput,
Image,
Platform,
ScrollView
} from 'react-native';
var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');
/**----导入外部的组件类---**/
var HomeDetail = require('./XMGHomeDetail');
var TopView = require('./XMGTopView');
var MiddleView = require('./XMGHomeMiddleView');
var MiddleBottomView = require('./XMGMiddleBottomView');
var ShopCenter = require('./XMGShopCenter');
var ShopCenterDetail = require('./XMGShopCenterDetail');
var GeustYouLike = require('./XMGGeustYouLike');
var Home = React.createClass({
render() {
return (
<View style={styles.container}>
{/*首页的导航条*/}
{this.renderNavBar()}
{/*首页的主要内容*/}
<ScrollView>
{/*头部的View*/}
<TopView />
{/*中间的内容*/}
<MiddleView />
{/*中间下半部分的内容*/}
<MiddleBottomView
popTopHome={(data)=>{this.pushToDetail(data)}}
/>
{/*购物中心*/}
<ShopCenter
popToHomeView = {(url) => this.pushToShopCenterDetail(url)}
/>
{/*猜你喜欢*/}
<GeustYouLike />
</ScrollView>
</View>
);
},
// 首页的导航条
renderNavBar(){
return(
<View style={styles.navBarStyle}>
{/*左边*/}
<TouchableOpacity onPress={()=>{this.pushToDetail()}}>
<Text style={{color:'white'}}>广州</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>
)
},
// 跳转到购物中心详情页
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=', '');
},
// 跳转到二级界面
pushToDetail(data){
// alert(data);
this.props.navigator.push(
{
component: HomeDetail, // 要跳转的版块
title:'详情页'
}
);
}
});
const styles = StyleSheet.create({
navBarStyle:{ // 导航条样式
height: Platform.OS == 'ios' ? 64 : 44,
backgroundColor:'rgba(255,96,0,1.0)',
// 设置主轴的方向
flexDirection:'row',
// 垂直居中 ---> 设置侧轴的对齐方式
alignItems:'center',
// 设置主轴的对齐方式
justifyContent:'space-around'
},
rightNavViewStyle:{
flexDirection:'row',
// backgroundColor:'blue',
height:64,
// 设置侧轴的对齐方式
alignItems:'center'
},
topInputStyle:{ // 设置输入框
width:width * 0.71,
height:Platform.OS == 'ios' ? 35 : 30,
backgroundColor:'white',
marginTop: Platform.OS == 'ios' ? 18 : 0,
// 设置圆角
borderRadius:17,
// 内左边距
paddingLeft:10
},
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 = Home;
XMGShopCenter.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView,
Image,
TouchableOpacity
} from 'react-native';
// 引入外部的组件类
var CommonCell = require('./XMGBottomCommonCell');
// 引入外部的json数据
var Home_D5 = require('../../LocalData/XMG_Home_D5.json');
var ShopCenter = React.createClass({
getDefaultProps(){
// 回调函数
return{
popToHomeView: null
}
},
render() {
return (
<View style={styles.container}>
{/*上部分*/}
<CommonCell
leftIcon="gw"
leftTitle="购物中心"
rightTitle={Home_D5.tips}
/>
{/*下部分*/}
<ScrollView
style={styles.scrollViewStyle}
horizontal={true} // 横向
showsHorizontalScrollIndicator={false}
>
{this.renderAllItem()}
</ScrollView>
</View>
);
},
// 返回下部分所有的Item
renderAllItem(){
// 定义组件数组
var itemArr = [];
// 取出数据
var shopData= Home_D5.data;
// 遍历
for (var i=0; i<shopData.length; i++){
// 取出单个数据
var data = shopData[i];
// 创建组件装入数组
itemArr.push(
<ShopCenterItem
shopImage = {data.img}
shopSale = {data.showtext.text}
shopName = {data.name}
detailurl = {data.detailurl}
key={i}
popTopShopCenter = {(url)=>this.popTopHome(url)}
/>
);
}
// 返回
return itemArr;
},
popTopHome(url){
// 判断
if (this.props.popToHomeView == null) return;
// 执行回调函数
this.props.popToHomeView(url);
}
});
// 每一个商场
var ShopCenterItem = React.createClass({
getDefaultProps(){
return{
shopImage: '',
shopSale:'',
shopName: '',
detailurl: '',
popTopShopCenter: null
}
},
render(){
return(
<TouchableOpacity onPress={()=>this.clickItem(this.props.detailurl)}>
<View style={styles.itemViewStyle}>
<Image source={{uri: this.props.shopImage}} style={styles.imageStyle}/>
<Text style={styles.shopSaleStyle}>{this.props.shopSale}</Text>
<Text style={styles.shopNameStyle}>{this.props.shopName}</Text>
</View>
</TouchableOpacity>
);
},
clickItem(url){
// 判断
if (this.props.detailurl == null) return;
// 执行回调函数
this.props.popTopShopCenter(url);
}
});
const styles = StyleSheet.create({
container: {
marginTop:15
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
imageStyle:{
width:120,
height:100,
borderRadius:8
},
scrollViewStyle:{
flexDirection:'row',
backgroundColor:'white',
padding:10
},
itemViewStyle:{
margin:8
},
shopSaleStyle:{
// 绝对定位
position:'absolute',
left:0,
bottom:30,
backgroundColor:'red',
color:'white',
padding:2
},
shopNameStyle:{
textAlign:'center',
marginTop:5
}
});
// 输出组件类
module.exports = ShopCenter;
XMGShopCenterDetail.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Platform,
TouchableOpacity,
Image,
WebView
} from 'react-native';
var Shop = React.createClass({
getInitialState(){
return{
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() {
// alert(this.props.url);
return (
<View style={styles.container}>
{/*导航*/}
{this.renderNavBar()}
<WebView
automaticallyAdjustContentInsets={true}
source={{uri: this.state.detailUrl}}
javaScriptEnabled={true}
domStorageEnabled={true}
decelerationRate="normal"
startInLoadingState={true}
/>
</View>
);
},
// 导航条
renderNavBar(){
return(
<View style={styles.navOutViewStyle}>
<TouchableOpacity onPress={()=>{this.props.navigator.pop()}} style={styles.leftViewStyle}>
<Image source={{uri: 'icon_camera_back_normal'}} style={styles.navImageStyle}/>
</TouchableOpacity>
<Text style={{color:'white', fontSize:16, fontWeight:'bold'}}>购物中心详情</Text>
<TouchableOpacity onPress={()=>{alert('点了!')}} style={styles.rightViewStyle}>
<Image source={{uri: 'icon_mine_setting'}} style={styles.navImageStyle}/>
</TouchableOpacity>
</View>
)
}
});
const styles = StyleSheet.create({
container: {
flex:1
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
navImageStyle:{
width:Platform.OS == 'ios' ? 28: 24,
height:Platform.OS == 'ios' ? 28: 24,
},
leftViewStyle:{
// 绝对定位
position:'absolute',
left:10,
bottom:Platform.OS == 'ios' ? 15:13
},
rightViewStyle:{
// 绝对定位
position:'absolute',
right:10,
bottom:Platform.OS == 'ios' ? 15:13
},
navOutViewStyle:{
height: Platform.OS == 'ios' ? 64 : 44,
backgroundColor:'rgba(255,96,0,1.0)',
// 设置主轴的方向
flexDirection:'row',
// 垂直居中 ---> 设置侧轴的对齐方式
alignItems:'center',
// 主轴方向居中
justifyContent:'center'
},
});
// 输出组件类
module.exports = Shop;
浙公网安备 33010602011771号