navigation.getParam в не объект - PullRequest
Новая
       11

navigation.getParam в не объект

0 голосов
/ 08 октября 2019

Я пытаюсь получить изображение, хранящееся в массиве на одном экране, и установить его в качестве источника изображения на другом экране. По существу, когда пользователь касается определенного изображения, это точное изображение будет перенесено на следующий экран. Проблема в том, что я получаю сообщение об ошибке: 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')}
  />
}

1 Ответ

1 голос
/ 08 октября 2019

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 })
}

Если вы не использовали реактив-редукс, просто вы можете получить доступ к изображению следующим образом: this.props.navigation.state.params.avatarPicture

Если вы используете реактив-редукс;Свяжите свои параметры навигации с экранами, как показано ниже, а затем получите к нему доступ, используя реквизиты.

Пожалуйста, не забудьте импортировать connect форму 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

...