Question

我要做的是自定义android back buttom，所以当我在屏幕上时，当我按“后退”按钮时，屏幕必须在MyProducts中导航，但是我正在接收this error

import React, { Component } from 'react';
import { View, StyleSheet, Text, Keyboard, Animated } from 'react-native';
import { Textarea, Form, Item, Input, Label, Button } from 'native-base';
import jwt_decode from 'jwt-decode';

class CreateProduct extends Component {
  constructor(props) {
    super(props);
    this.keyboardHeight = new Animated.Value(0);
    this.imageHeight = new Animated.Value(199);

    this.state = {
      isButtonsHidden: false,
      title: null,
      description: '',
      isDialogVisible: false,
      messageError: '',
    };
  }

  registerProduct = () => {
    const { state } = this.props.navigation;
    const token = state.params ? state.params.token : undefined;
    const user = jwt_decode(token);

    fetch(createProductPath, {
      method: 'POST',
      body: formData,
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'multipart/form-data',
      },
    })
    .then((response) => {
      return response.json();
    })
    .then((responseJson) => {
      if (responseJson.error != null) {
        this.setState({ messageError: responseJson.error })
        this.setState({ isDialogVisible: true })
      }
      else {
        this.props.navigation.navigate('MyProducts', { token: token });
      }
    })
  }

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
  }
  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
  }

  handleBackButton() {
    this.props.navigation.navigate('MyProducts', { token: token });
    return true;
  }

  render() {
    const { state } = this.props.navigation;
    var token = state.params ? state.params.token : undefined;

    return (
      <Animated.View
        style={[styles.container, { paddingBottom: this.keyboardHeight }]}
      >
        <Form style={styles.description}>
          <Item floatingLabel>
            <Label>Title</Label>
            <Input
              onChangeText={(title) => { this.setState({ title }) }}
            />
          </Item>
          <Textarea
            onChangeText={(description) => { this.setState({ description }) }}
          />
        </Form>
        <ToogleView hide={this.state.isButtonsHidden}>
          <View style={styles.buttonContainer}>
            <Button
              onPress={() => { this.props.navigation.navigate('MyProducts', { token: token }); }}
              danger
            >
              <Text style={{ color: 'white' }}> CANCEL </Text>
            </Button>
            <Button
              onPress={this.registerProduct}
              success
            >
              <Text style={{ color: 'white' }}> SAVE </Text>
            </Button>
          </View>
        </ToogleView>
      </Animated.View>
    );
  }
}
export default CreateProduct;

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1
  },
  description: {
    flex: 1,
    height: '35%',
    width: '95%',
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingBottom: 10,
  },
});

出于我未知的原因，当我用console.log看到道具时，道具是不确定的，所以我无法通过

handleBackButton() { this.props.navigation.navigate('MyProducts', { token: token }); }

有没有很好的方法可以做到这一点？我很感激。

Answer 1

将 handleBackButton 功能用作箭头功能

handleBackButton = () => {
   this.props.navigation.navigate('MyProducts', { token: token });
   return true
 }

Answer 2

您可以尝试更改对 handleBackButton 的呼叫以绑定到此吗？

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton.bind(this));
  }
  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton.bind(this));
  }

  handleBackButton() {
    this.props.navigation.navigate('MyProducts', { token: token });
    return true;
  }

未定义不是对象（正在评估'this.props.navigation.navigate'）React native

2 个答案: