Question

因此，方案是，我想在我的应用程序顶部实现一个GoBack图标，该图标可以返回上一页。我正在使用堆栈导航器并禁用标题。所以我需要一个返回按钮。我决定为此制作一个组件，这是我的代码，

import { Ionicons } from '@expo/vector-icons';

function GoBack(){
    return (
        <Ionicons onPress={()=>this.props.navigation.goBack()} name="md-arrow-back" size={24} color="#0c85f3" />
    );
  }

  export default GoBack;

如果我这样做，那么它会向我显示typeError：无法读取未定义的属性'goBack'。但是，如果我将onPress用作道具并实现同一行代码onPress={()=>this.props.navigation.goBack()}，则它会正常工作。 / p>

我不能在所有地方都使用onPress道具。它的屏幕很多的应用程序。如何将其应用于组件本身？我认为我对React导航缺乏深入的了解。请也帮助我理解解决方案。

这是我使用GoBack组件的方式：

import React, { Component } from 'react';
import {View, StyleSheet, Text, FlatList} from 'react-native';
import TestRoomtData from '../../../testData';
import HistoryCard from '../../../components/cards/historyUserCard';
import GoBack from '../../../shared/goBackButton';


class UserHistory extends Component{
    render(){
        return(
          <View style={styles.container}>
            <View style={{flexDirection:"row",}}>
            <GoBack />
            <Text style={styles.title}>History</Text>
            </View>

            <Text  style={styles.title01}>Past Patients</Text>

                <FlatList 
                    data={TestRoomtData}
                    renderItem={({item})=>([
                        <View>
                          <HistoryCard 
                              prescription={item.prescription}
                              diagnosis={item.diagnosis}
                              date={item.date}
                              source={{
                                uri: item.uri
                              }}
                              btnText01="More"
                              btnText02="Edit"
                              onPressBtn2={()=> this.props.navigation.navigate('Edit History') }/>

                        </View>
                    ]
                    )}
                    />
                    </View>





        );
    }
}

Answer 1

这是一个功能组件，

第一：因此您不能使用this.，
第二：您忘记了props

function GoBack(props){  // <---- HERE
    return (
        <Ionicons 
            onPress={props.navigation.goBack}  // <---- HERE
            name="md-arrow-back" size={24} color="#0c85f3" />
    );
  }

Answer 2

在react的功能组件中，您不能使用this关键字来访问道具。在当前情况下，您必须在GoBack中传递导航道具像这样的东西

function Goback(props) {
  const { navigation } = props;
  return (
    <Ionicons 
      onPress={() => navigation.goBack()} 
      name="md-arrow-back" 
      size={24} 
      color="#0c85f3" 
    />
   );
}

现在，调用GoBack组件，

<GoBack 
  navigation={{ goBack: () => goBack() }}
/>

typeError：无法读取未定义的属性'goBack'

2 个答案: