Почему я не могу получить доступ к this.props.navigation в родном предупреждении?

Alert.alert(
      '',
      'Kindly Select from the following Actions',
      [
        {
          text: 'Edit',
          onPress: () => this.props.navigation.navigate(
            'PositionForm',
            {
              formType: 'edit',
              item: this.props.position
            }
          )
        },
        { text: 'Delete', onPress: () => console.log('delete Pressed') },
      ]
    );

Я ищу работу вокруг. Я хочу перейти на другую страницу, когда кнопка редактирования нажата в предупреждении. Я использую реактивную навигацию и редукцию. Пожалуйста, помогите. Заранее спасибо.

Полный код компонента приведен ниже:

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

class PositionItem extends Component {
  showAlert() {
    Alert.alert(
      '',
      'Kindly Select from the following Actions',
      [
        {
          text: 'Edit',
          onPress: () => this.props.navigation.navigate(
            'PositionForm',
            {
              formType: 'edit',
              item: this.props.position
            }
          )
        },
        { text: 'Delete', onPress: () => console.log('delete Pressed') },
      ]
    );
  }

  render() {
    const {
      positionContainer,
      textStyle,
      iconsStyle,
      positionName,
      starIconStyle
    } = styles;
    const {
      name
    } = this.props.position;
    return (
      <TouchableOpacity onPress={this.showAlert.bind(this)}>
        <View style={positionContainer}>
          <View style={positionName}>
            <Text style={textStyle}>{name}</Text>
          </View>
          <View style={iconsStyle}>
            <Icon style={starIconStyle} name="star-o" size={30} color="#ccc" />
            <Icon name="angle-right" size={30} color="#ccc" />
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  positionContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingTop: 15,
    paddingBottom: 15,
    borderBottomWidth: 1,
    borderColor: '#ccc'
  },
  textStyle: {
    marginBottom: 0,
    color: '#333333',
    fontSize: 20,
    fontWeight: '600',
    borderLeftWidth: 6,
    borderColor: '#cccccc',
    paddingLeft: 20,
    paddingTop: 5,
    paddingBottom: 5,
    lineHeight: 20
  },
  iconsStyle: {
    flexDirection: 'row',
    flex: 20,
  },
  starIconStyle: {
    paddingTop: 2,
    paddingRight: 15
  },
  positionName: {
    flex: 80
  }
});

export default PositionItem;

react-native alert react-navigation
person Muhammad Abdullah    schedule 16.06.2017    source источник
comment
Можете ли вы опубликовать весь компонент? И используется ли этот компонент в качестве компонента экрана реактивной навигации?   -  person magneticz    schedule 17.06.2017
comment
возможно, вам придется связать «это» с Aler.alert(), чтобы вы могли получить доступ к реквизитам в этом.   -  person Ankit Aggarwal    schedule 18.06.2017
comment
Вы можете увидеть решение в этом сообщении ="undefined не является объектом, оценивающим оповещение о навигации по этим 2 реквизитам"> stackoverflow.com/questions/55406468/   -  person Caman    schedule 29.03.2019

Ответы (1)


arrow_upward
2
arrow_downward

Я не вижу проблемы, но в худшем случае вы можете просто поместить переменную в верхнюю область.

showAlert() {
    const {navigation, position} = this.props
    Alert.alert(

Также я предпочитаю не привязываться и использовать новый синтаксис для создания полей класса, вы всегда правильно это понимаете.

showAlert = () => {
    ...
}

<TouchableOpacity onPress={this.showAlert}>
person Dale Jefferson    schedule 23.06.2017