找不到變量：導航

Question

我試圖在react-navigation的幫助下在兩個屏幕之間導航。我能夠在render方法內訪問navigate，因爲其範圍也在該方法內。

我應該在哪裏申報，所以我可以訪問它component的任何方法。我試圖在onPressButton方法中訪問navigate，但它給出錯誤。

找不到變量：導航

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

你需要移動const { navigate } = this.props.navigation;進入onPressButton功能代替render功能（請不要忘記bind的功能，以便this具有正確的值）：

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

對象解構這樣的工作，

解構對象：

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' 

你的情況：

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

或：

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

那是因爲你沒有從道具解構它，你在你的渲染（）函數所做

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(); 
    }