为什么我不能访问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') }, 
     ] 
    );

我找周围的工作。我希望当点击警报编辑按钮导航到另一个页面。我正在使用react-navigation和redux。请帮助。在此先感谢。为什么我不能访问this.props.navigation在反应过来本地警报？

完成组件代码如下：

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;

来源

2017-06-16 Muhammad Abdullah

你能张贴整个组件？并用于该设备作为反应的导航屏幕组件？ – magneticz

也许你将不得不约束“这”到Aler.alert（），这样就可以在访问该道具。 –

我看不到的问题，但更糟糕的情况下，你可以把该变量在上范围。

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

此外，我不想绑定和使用新的语法来创建类字段，你总是会得到正确的。

showAlert =() => { 
    ... 
} 

<TouchableOpacity onPress={this.showAlert}>

来源

2017-06-23 22:31:54

为什么我不能访问this.props.navigation在反应过来本地警报？

回答

相关问题