我有一个视图,该视图可通过可触摸的不透明性单击,其中具有在内部呈现的item.address和item.price。
<TouchableOpacity onPress = {this.onShowHomeDetails.bind()}>
<View style = {{height: 130,width :130,
marginLeft : 20, borderWidth: 0.5, borderColor: '#dddddd'}} >
<View style={{flex: 2}}>
<Image source={{uri : item.imageUrl}}
style={{flex:1, width: null,
height: null, resizeMode: 'cover'}}/>
</View>
<View style={{flex: 1 , paddingLeft: 10,paddingTop: 10}}>
<Text style={{fontWeight:"bold", fontSize :12}}>
{item.address}
</Text>
{this.getIndividualHouseInfo(item.address)}
</View>
<View style={{flex: 1 , paddingLeft: 10}}>
<Text> ${item.price} </Text>
</View>
</View>
</TouchableOpacity>
如何使用onShowHomeDetails函数通过导航将这些值传递到另一个屏幕?
onShowHomeDetails = () => {
this.props.navigation.navigate('HomeDetails');
}
目标位置屏幕上的我的家庭详细信息组件是
class HomeDetails extends Component{
constructor(props){
super(props);
this.state = {
address : this.props.state.params.address,
};
}
render(){
return(
<View style ={styles.container}>
<Text>Details </Text>
<Text>{this.state.address}</Text>
</View>
);
}
}
答案 0 :(得分:1)
很酷,我觉得很简单。
通话功能:
<TouchableOpacity onPress={this.onShowHomeDetails.bind(this, item)}>
<View style = {{height: 130,width :130,
marginLeft : 20, borderWidth: 0.5,
borderColor: '#dddddd'}} >
<View style={{flex: 2}}>
<Image source={{uri : item.imageUrl}}
style={{flex:1, width: null,
height: null, resizeMode: 'cover'}}
/>
</View>
<View style={{flex: 1 , paddingLeft: 10,paddingTop: 10}}>
<Text style={{fontWeight:"bold" , fontSize :12}}> {item.address} </Text>
{this.getIndividualHouseInfo(item.address)}
</View>
<View style={{flex: 1 , paddingLeft: 10}}>
<Text> ${item.price} </Text>
</View>
</View>
</TouchableOpacity>
写功能:
onShowHomeDetails = (item) => {
this.props.navigation.navigate('HomeDetails', {item: item});
}
在适当的屏幕上获取参数:
class HomeDetails extends Component{
constructor(props){
super(props);
this.state = {
address : props.navigation.getParam('item', '');
};
}
render(){
return(
<View style ={styles.container}>
<Text>Details </Text>
<Text>{this.state.address}</Text>
</View>
);
}
}
关于将值作为导航参数传递的一些重要的事情。
传递参数和getParams两者的名称应相同。
在getparams方法中,我们设置了空string('')。因为如果值不是
通过,返回空字符串
请参阅本文档,它将为您提供帮助。 https://reactnavigation.org/docs/en/params.html
答案 1 :(得分:0)
您可以在导航到状态的同时传递数据。
onShowHomeDetails = () => {
this.props.navigation.navigate('HomeDetails', { home: 'abc'});
// you can pass any type of object in here as well
}
根据反应导航Object.keys
。第二个参数是传递到目标路线的参数。
navigation.navigate({routeName,params,action,key})
并与道具一起在另一个组件中使用。 选项1:
this.props.navigation.getParam('home')
如果根本没有定义home,则选项1失败,但对于选项2,它将回退到bydefaultHome
选项2:
this.props.navigation.getParam('home', 'bydefaultHome');
希望这会有所帮助!