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();
}
}
移動する必要があります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();
}
}
このようなオブジェクトの破壊作業は、
オブジェクトの破壊:
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();
}
}
それは、あなたが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();
}