react native 不同页面之间传参 传值 __listview列表跳转详情页 带参数 传值

'use strict';
import React, { Component } from 'react';
import{
View,
Navigator
} from 'react-native';
import GoodsList from './GoodsList';

class ListDefault extends Component{
render(){
var defaultName='GoodsList';
var defaultComponent=GoodsList;
return(
<Navigator initialRoute={{name:defaultName,component:defaultComponent}}
configureScene={(route)=>{
return Navigator.SceneConfigs.HorizontalSwipeJump;
}}
renderScene={(route,navigator) =>{
let Component = route.component;
return <Component{...route.params} navigator={navigator}/>
}}/>
);  }
}
module.exports=ListDefault;

class GoodsList extends Component {

constructor(props) {
super(props);
// 初始状态
this.state = {
loaded :false,
dataSource : new ListView.DataSource({
rowHasChanged:(row1,row2) => row1 !== row2,
}),
};
}

componentDidMount(){
this._fetchListData();
}
_fetchListData(){
//fetch网络加载数据后面单独讲，此处略
}

_renderLoadingView(){
return(
<View style={{flex:1,
justifyContent:'center',alignItems:'center',backgroundColor:'#F5FCFF'}}>
<Text>Loading GoodsList data .....</Text>
</View>
)
}

_renderRow(item){
return(
<TouchableHighlight onPress = { this._pressRow.bind(this,item)} >
<View style={[styles.listContainer,{justifyContent:'flex-start',alignItems:'flex-start', }]}>

<View style={[styles.leftContainer,{justifyContent:'space-around',alignItems:'center'}]}>
<Image source={require('../images/logistics/siji_protrait.png')} style={styles.siji_protrait}/>
<Text>{item.realName}</Text>
<Image source={callPhoneImage.src} style={styles.image_uri}/>
</View>

<View style={styles.rightContainer}>
<View>
<Text>{item.updateTime}</Text>
</View>
<View >
<Text sytle={styles.title}>{item.origin}</Text>
<Text sytle={styles.title}>{item.destination}</Text>
<Text sytle={styles.title}>{item.carType}</Text>
<Text sytle={styles.title}>{item.goodsWeight} 吨</Text>
<Text>00001</Text>
</View>
</View>
</View>
</TouchableHighlight>
);

_pressRow(item){
const {navigator} =this.props;
if(navigator){
navigator.push({
name:'GoodsDetail',
component:GoodsDetail,
params:{
item:item,
} })
}
}
_renderHeader(){
return(
<View>header</View>
)
}

render(){
console.log("goodslist render .if before....")
if (!this.state.loaded){
return this._renderLoadingView();
}
return(
<ListView
//enableEmptySections={true}
dataSource={this.state.dataSource}
renderRow={this._renderRow.bind(this)}
style={styles.listView}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
listView: {
flex:1,
paddingTop: 20,
backgroundColor: '#F5FCFF',
},
thumbnail: {
width: 53,
height: 81,

},
listContainer:{
flex:1,
flexDirection:'row',
borderWidth: 1,
borderColor: '#eeeeee',
},
leftContainer:{
flex:1,
flexDirection:'column'
},
rightContainer: {
flex: 3,
},
title: {
fontSize: 20,
marginBottom: 8,
textAlign: 'center',
},
siji_protrait:{
height:60,
resizeMode:'cover'
},
image_uri:{
height:35,
resizeMode:'cover',

},

year: {
textAlign: 'center',
},
});
module.exports=GoodsList;

class GoodsDetail extends Component{
constructor(props){
super(props);
this.state={
itemValue:"id占用位置"
}}
componentDidMount(){
this.setState({
itemValue:this.props.item,
});
}

_pressBack(){
const{navigator} = this.props;
if(navigator){
navigator.pop();
}
}
render(){
return(
<View style={styles.container}>
<View>
<TouchableHighlight onPress={this._pressBack.bind(this)} style={{margin:20}}>
<Text>返回</Text>
</TouchableHighlight>
</View>
<Text>detail</Text>
<Text>item=={this.state.itemValue.origin}</Text>
</View>
)}
}