Warum kann ich nicht auf these.props.navigation im reaktiven nativen Alert zugreifen?

Question

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') }, 
     ] 
    ); 

Ich bin auf der Suche nach einer Arbeit. Ich möchte zu einer anderen Seite navigieren, wenn auf eine Bearbeitungsschaltfläche geklickt wird. Ich benutze react-navigation und redux. Freundlich helfen. Vielen Dank im Voraus.

komplette Komponentencode ist unten:

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; 

Answer 1

Ich kann nicht das Problem, aber schlimmer Fall, dass Sie im oberen Rahmen setzen die Variable nur.

Auch ich bevorzuge nicht zu binden und verwenden Sie die neue Syntax zum Erstellen von Klassenfeldern, Sie bekommen immer das Recht dies.

showAlert =() => { 
    ... 
} 

<TouchableOpacity onPress={this.showAlert}>