navigation.getParam不是对象

问题描述

我正在尝试获取存储在一个屏幕中的数组中的图像，并将其设置为另一屏幕中的图像源.本质上，当用户触摸某个图像时，该精确图像将被带到下一个屏幕.问题是我收到一条错误消息，指出 undefined不是一个对象(正在评估'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;将您的导航参数绑定到如下所示的屏幕上，然后使用props进行访问.

If you use react-redux;Bind your navigation params to screens porps like below and then access it using props.

请记住要从 react-redux

从'react-redux'导入{connect};

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 thisthis.props.avatarPicture

这篇关于navigation.getParam不是对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！