时间戳

首页 > 解决方案 > 使用导航触发功能组件的刷新（React Native）

javascript - 使用导航触发功能组件的刷新（React Native）

问题描述

我的应用程序中的一个屏幕是一个功能组件，如下所示：

export default function DonationsScreen({ navigation }) {
  const [requests, setRequests] = useState("")

  useEffect(() => {
    if (!requests) {
      getRequests()
    }
  }, [])

  // I omit some of the code here

  return (
    <SafeAreaView>
      <SearchBar lightTheme placeholder="Type Here..." />
      <FlatList
        data={requests}
        renderItem={({ item }) =>
          item.donationsLeft > 0 ? (
            <DonationItem request={item} navigation={navigation} />
          ) : null
        }
        keyExtractor={(item) => item.id}
      />
    </SafeAreaView>
  )
}

class DonationItem extends React.Component {
  render() {
    const { navigate } = this.props.navigation
    return (
      <Card title="hello">
        <Button
          buttonStyle={styles.donateButton}
          onPress={() =>
            this.props.navigation.push("Realizar donación", {
              request: this.props.request,
            })
          }
          title="Donar"
        />
      </Card>
    )
  }
}

这样您在 DonationItem 中看到的 onPress 就会导航到另一个名为 DonationFormScreen 的屏幕。此屏幕中的内容并不重要，只是在其中一个方法中调用了另一个导航：

this.props.navigation.push('Donación confirmada', {comingFrom: this.state.comingFrom});

最后，“Donación confirmada”是一个屏幕 DonationConfirmationScreen：

export default class DonationConfirmationScreen extends React.Component {

    render() {

        return(
        <View style={styles.confirmation}>
            <View style={styles.confirmationContent}>
                <Ionicons name='ios-checkmark-circle' color={'green'} size={130}/>
                <Button
                buttonStyle={styles.button}
                title='Listo' 
                onPress={() => this.props.navigation.navigate("Pedidos")}
                />
            </View>
        </View>
        );
    }
}

如您所见this.props.navigation.navigate("Pedidos")，在按钮内部调用并且工作正常。 我想要做的不仅是导航回“Pedidos”（这是我的 DonationsScreen），还要触发某种刷新，因为我需要再次调用 getRequests()。我怎样才能做到这一点？

标签： javascriptreact-native

解决方案

感谢所有回答的人，但我最终使用了其他东西，因为我无法让其他东西正常工作。

const isFocused = useIsFocused();

const [requests, setRequests] = useState('');

useEffect(() => {
  getRequests();
} , [isFocused])

如您所见，我最终使用了 isFocused。我不得不添加这个导入：

import { useIsFocused } from '@react-navigation/native';

推荐阅读