Variable kann nicht gefunden werden: navigieren

Question

Ich versuche, zwischen zwei Bildschirm mit Hilfe von react-navigation zu navigieren. Ich bin in der Lage, auf navigate innerhalb der render Methode zuzugreifen, da sein Bereich auch innerhalb dieser Methode ist.

Wo sollte ich deklarieren, damit ich auf jede Methode dieser component zugreifen kann. Ich versuche auf navigate innerhalb der Methode zuzugreifen, aber es gibt einen Fehler.

nicht variabel gefunden:

import React, { Component } from "react"; 
import { View, Text, Image, Button, Alert, StyleSheet } from "react-native"; 
import styles from "./Styles"; 
import * as strings from "./Strings"; 
import RoundButton from "./RoundButton"; 
var DialogAndroid = require("react-native-dialogs"); 
import { StackNavigator } from "react-navigation"; 

export default class CreateMessageScreen extends Component { 
    render() { 
    const { navigate } = this.props.navigation; 

    return (
     <View style={styles.container}> 
     <Image source={require("./img/create_message.png")} /> 
     <Text style={styles.textStyle}>{strings.create_message}</Text> 

     <RoundButton 
      textStyle={styles.roundTextStyle} 
      buttonStyle={styles.roundButtonStyle} 
      onPress={this.onPressButton} 
     > 
      CREATE MESSAGE 
     </RoundButton> 

     </View> 
    ); 
    } 

    onPressButton() { 
    var options = { 
     title: strings.app_name, 
     content: strings.create_message, 
     positiveText: strings.OK, 
     onPositive:() => navigate("DashboardScreen") 
    }; 
    var dialog = new DialogAndroid(); 
    dialog.set(options); 
    dialog.show(); 
    } 
} 

Answer 1

Sie müssen getan haben const { navigate } = this.props.navigation; in die bewegen onPressButton Funktion anstelle der render Funktion (vergessen Sie nicht, bind die Funktion, so dass this hat den richtigen Wert):

export default class CreateMessageScreen extends Component { 
    constructor() { 
    super(); 

    // need to bind `this` to access props in handler 
    this.onPressButton = this.onPressButton.bind(this); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <Image source={require("./img/create_message.png")} /> 
     <Text style={styles.textStyle}>{strings.create_message}</Text> 

     <RoundButton 
      textStyle={styles.roundTextStyle} 
      buttonStyle={styles.roundButtonStyle} 
      onPress={this.onPressButton} 
     > 
      CREATE MESSAGE 
     </RoundButton> 

     </View> 
    ); 
    } 

    onPressButton() { 
    const { navigate } = this.props.navigation; 

    var options = { 
     title: strings.app_name, 
     content: strings.create_message, 
     positiveText: strings.OK, 
     onPositive:() => navigate("DashboardScreen") 
    }; 
    var dialog = new DialogAndroid(); 
    dialog.set(options); 
    dialog.show(); 
    } 
} 

Answer 2

Objekt Destrukturierung Arbeit wie folgt navigieren,

Destrukturierung Objekte:

const obj = { first: 'Jane', last: 'Doe' }; 
const {first: f, last: l} = obj; 
    // f = 'Jane'; l = 'Doe' 

// {prop} is short for {prop: prop} 
const {first, last} = obj; 
    // first = 'Jane'; last = 'Doe' 

in Ihrem Fall:

1. const { navigation:navigate } = this.props; 

oder:

2. const {navigation} = this.props; 





export default class CreateMessageScreen extends Component { 
    render() { 
const { navigation:navigate } = this.props; 

    return (
     <View style={styles.container}> 
     <Image source={require("./img/create_message.png")} /> 
     <Text style={styles.textStyle}>{strings.create_message}</Text> 

     <RoundButton 
      textStyle={styles.roundTextStyle} 
      buttonStyle={styles.roundButtonStyle} 
      onPress={this.onPressButton} 
     > 
      CREATE MESSAGE 
     </RoundButton> 

     </View> 
    ); 
    } 



    onPressButton() { 
    const { navigation:navigate } = this.props; 
     var options = { 
      title: strings.app_name, 
      content: strings.create_message, 
      positiveText: strings.OK, 
      onPositive:() => navigate("DashboardScreen") 
     }; 
     var dialog = new DialogAndroid(); 
     dialog.set(options); 
     dialog.show(); 
     } 
    } 

Answer 3

Das geschieht, weil Sie es nicht aus den Requisiten sind Destrukturierung wie Sie in Ihrem render() Funktion

onPressButton =() => { 
    var {navigate} = this.props.navigation; 
    var options = { 
     title: strings.app_name, 
     content: strings.create_message, 
     positiveText: strings.OK, 
     onPositive:() => navigate("DashboardScreen") 
    }; 
    var dialog = new DialogAndroid(); 
    dialog.set(options); 
    dialog.show(); 
    }