web-dev-qa-db-ja.com

変数が見つかりません：ナビゲート

react-navigationを使用して2つの画面間を移動しようとしています。スコープもそのメソッド内にあるため、navigateメソッド内でrenderにアクセスできます。

このcomponentのどのメソッドにもアクセスできるように、どこに宣言すればよいですか。 navigateメソッド内でonPressButtonにアクセスしようとしていますが、エラーが発生します。

変数が見つかりません：ナビゲート

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();
  }
}
javascriptandroidreactjsreact-nativereact-native-android
8
N Sharma

移動する必要があります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();
  }
}
4
Michael Peyper

このようなオブジェクトの破壊作業は、

オブジェクトの破壊：

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

それは、あなたがrender（）関数で行ったようにプロップからそれを分解していないために起こります

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