我试图在react-navigation
的帮助下在两个屏幕之间导航。我可以在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();
}
}
答案 0 :(得分:3)
您需要将const { navigate } = this.props.navigation;
移至onPressButton
函数而不是render
函数(不要忘记bind
函数,以便{{1} }具有正确的值):
this
答案 1 :(得分: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();
}
}
答案 2 :(得分:2)
之所以发生这种情况,是因为你没有像在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();
}