navigation.getParam 不是对象 [英] navigation.getParam in not an object
问题描述
我正在尝试获取存储在一个屏幕中的数组中的图像,并将其设置为另一个屏幕中图像的源.本质上,当用户触摸某个图像时,该精确图像将被带到下一个屏幕.问题是我收到一条错误消息,说 undefined is not an object (evalating 'navigation.getParam')
I am trying to get an image that is stored in an array in one screen and set it in as a source for an image in another screen. Essentially when a user touches a certain image that exact image will be carried to the next screen. The problem is that I am receiving an error saying undefined is not an object (evaluating 'navigation.getParam')
代码如下:屏幕 1
this.state = {
messageItem: null,
chat: [{
convo: [Chat1, Chat2, Pic1, Chat4, Chat5, Chat6],
}]
}
openMessage = (bub) => {
this.setState({
messageItem: bub
});
console.log({ bub })
}
renderChat = () => {
return this.state.chat.map((bub, index) => {
return bub.convo.map((convo, i) => {
if (bub.convo[i])
return (
<Avatar
key={i}
size="medium"
containerStyle={{
marginRight: 15, shadowOpacity: 0.3,
shadowRadius: 2,
shadowColor: 'black'
}}
rounded
source={bub.convo[i]}
onPress={() => { this.openMessage({ convo: bub.convo[i] }) }
} />
)
})
})
}
renderChat = () => {
return this.state.chat.map((bub, index) => {
return bub.convo.map((convo, i) => {
if (bub.convo[i])
return (
<Avatar
key={i}
size="medium"
containerStyle={{
marginRight: 15, shadowOpacity: 0.3,
shadowRadius: 2,
shadowColor: 'black'
}}
rounded
source={bub.convo[i]}
onPress={() => { this.openMessage({ convo: bub.convo[i] }) }
} />
)
})
})
}
render(){
{ this.renderChat() }
{ this.state.messageItem && this.props.navigation.navigate('ChatScreen', { avatarPicture: this.state.messageItem.convo }) }
}
触摸头像后会进入ChatScreen,相关代码如下:
the avatar should be touched which will lead to the ChatScreen, and it's relevant code is as follows:
render() {
const { navigation } = this.props;
<Avatar
size="medium"
containerStyle={{ alignSelf: 'center', position: 'absolute', justifyContent: 'center', marginTop: 28 }}
rounded
source={navigation.getParam('avatarPicture')}
/>
}
推荐答案
在 Screen1.js 中
In Screen1.js
下面改为
onPress={() =>{ this.openMessage({ convo: bub.convo[i] }) }
openMessage = (bub) => {
this.setState({
messageItem: bub
});
console.log({ bub })
}
到这里
onPress={() =>{ this.openMessage(bub.convo[i]) }
openMessage = (bub) => {
this.setState({
messageItem: bub
});
console.log({ bub })
this.props.navigation.navigate('ChatScreen', { avatarPicture: bub })
}
如果你没有使用 react-redux,你可以像这样访问图像 this.props.navigation.state.params.avatarPicture
If your not used the react-redux simply you can access the image like this this.props.navigation.state.params.avatarPicture
如果你使用 react-redux;将您的导航参数绑定到如下所示的屏幕弹出窗口,然后使用道具访问它.
If you use react-redux; Bind your navigation params to screens porps like below and then access it using props.
请记得导入 connect
form react-redux
Please remember to import connect
form react-redux
import { connect } from 'react-redux';
ChatScreen.js
const mapStateToProps = (state, props) => {
return {
...props.navigation.state.params
};
};
export default connect(mapStateToProps)(ChatScreen);
现在您将能够像这样访问图像this.props.avatarPicture
And now you will be able access the image like this
this.props.avatarPicture
这篇关于navigation.getParam 不是对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!