Можем ли мы использовать this.props.map, а также this.props.navigation в одном классе для перехода на другой экран

#javascript #java #react-native

#javascript #java #react-native

Вопрос:

Я использовал this.props.maps а также this.props.navigation , который показывает ошибку:

this.props.navigation.navigate является неопределенным объектом

Пытаюсь перейти на другую страницу, отображая базу данных firebase, но получаю ошибку, но тот же код, который я пробовал, просто создав представление и перейдя на другую страницу, тогда он работает

 export default class ItemComponent extends Component {


  constructor(props) {
    super(props);
    // need to bind `this` to access props in handler
    this._onEditLibrary = this._onEditLibrary.bind(this);
  }

  static propTypes = {
      items: PropTypes.array.isRequired
  };
  _onEditLibrary=()=> {
    this.props.navigation.navigate('EditLibrary');
  };
  render() {
    return (
      <View style={styles.itemsList}>
          <TouchableOpacity  onPress={this._onEditLibrary}>
        {this.props.items.map((item, index) => {
            return (
                <View key={index}>

                <ImageBackground source={item.Image} style={ { height:150, width:150}}>
                    <Text style={styles.itemtext}>{item.Name}</Text>
                    </ImageBackground>

                </View>
            )
        })
        }
        </TouchableOpacity>
      </View>
    );
  }
}
  

Необходимо перейти на другую страницу

Комментарии:

1. Как вы используете ItemComponent ? this.props.navigation доступно только в том случае, ItemComponent если это экран навигатора.

Ответ №1:

Попробуйте это

 export default class ItemComponent extends Component {


  constructor(props) {
    super(props);
    // need to bind `this` to access props in handler
    this._onEditLibrary = this._onEditLibrary.bind(this);
  }

  static propTypes = {
      items: PropTypes.array.isRequired
  };
  _onEditLibrary=()=> {
    this.props.navigation.navigate('EditLibrary');
  };
  render() {
    return (
      <View style={styles.itemsList}>
        {this.props.items.map((item, index) => {
            return (
                <TouchableOpacity key={index} onPress={this._onEditLibrary}>
                    <ImageBackground source={item.Image} style={ { height:150, width:150}}>
                           <Text style={styles.itemtext}>{item.Name}</Text>
                    </ImageBackground>
              </TouchableOpacity>
            )
        })
        }
      </View>
    );
  }
}
  

Комментарии:

1. undefined — это не объект (оценивающий ‘_this.props.navigation.navigate’), показывающий ту же ошибку, что и раньше

2. Я исправил эту проблему самостоятельно, просто изменил props на state, и это сработало в любом случае спасибо за поддержку {this.state.items.map((item, index) => {