文章/答案/技术大牛

发布

社区首页 >问答首页 >非对象中的navigation.getParam

问非对象中的navigation.getParam
EN

Stack Overflow用户

提问于 2019-10-08 10:07:17

回答 1查看 278关注 0票数 1

我正在尝试获取存储在一个屏幕中的数组中的图像，并将其设置为另一个屏幕中的图像的源。从本质上讲，当用户触摸某个图像时，该图像将被带到下一个屏幕。问题是我收到一条错误消息，显示为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，其相关代码如下：

render() {
  const { navigation } = this.props;
  <Avatar
    size="medium"
    containerStyle={{ alignSelf: 'center', position: 'absolute', justifyContent: 'center', marginTop: 28 }}
    rounded
    source={navigation.getParam('avatarPicture')}
  />
}

react-native

navigation

expo

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-08 13:10:57

在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

如果你使用react-redux；将你的导航参数绑定到屏幕porps，如下所示，然后使用props访问它。

请记住从react-redux导入connect

import { connect } from 'react-redux';

ChatScreen.js

const mapStateToProps = (state, props) => {
  return {
    ...props.navigation.state.params
  };
};

export default connect(mapStateToProps)(ChatScreen);

现在，您可以像这样访问镜像this.props.avatarPicture

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58279318

复制

相似问题

问非对象中的navigation.getParam
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问非对象中的navigation.getParamEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问非对象中的navigation.getParam
EN