react-native 中的 Window.location.reload()

IT技术 reactjs react-native
2022-07-25 02:05:26

我经常window.location.reload在我的 React Web 项目中使用。

window.location.reload();

有没有类似的方法可以在 react-native 中重新加载页面(组件)?

2个回答

您提到的是浏览器功能。React Native 使用本机功能来呈现您的应用程序,因此没有浏览器功能window.location.reload()

所以我不确定你的特定用例是什么。我想需要重新加载当前屏幕,而不是完整的应用程序。

在这种情况下,您应该使用 react-way 重新渲染您的屏幕。在 React 中,视图会在props或状态发生变化时重新渲染。因此,如果要触发完全重新加载,则需要有一些内部状态会触发重新加载。例如,您可以使用key属性和具有切换此键的内部状态的容器。但我认为这是一种黑客行为。您应该真正使用react数据驱动的视图您可以在官方文档中阅读有关 key prop 的更多信息或查看 Google 的这篇文章:https ://kentcdodds.com/blog/understanding-reacts-key-prop/

import React from 'react';
import { View, Text } from 'react-native';

const Container = () => {
  const [key, setKey] = React.useState(0);
  const reload = React.useCallback(() => setKey((prevKey) => prevKey + 1), []);
  return <Child reload={reload} key={key} />;
}

const Child = ({ reload }) => {
  const getRandomId = () => parseInt(Math.random() * 100, 10);
  // We use useRef to showcase that the view is fully re-rendered. Use ref is initialized once per lifecycle of the React component
  const id = React.useRef(getRandomId());
  return (
    <View>
      <Text>My random id is {id}</Text>
      <Button onPress={reload} />
    </View>
  )
}

@编码就是生活

import { NavigationEvents } from 'react-navigation';

<NavigationEvents onWillFocus={() => this.goBackReload()}/>

这是重新加载页面的方式,即。当您返回页面时,您会得到回调方法。使用此方法清除所有状态值并刷新页面。另一种方法是使用刷新控件重新加载应用程序。

<ScrollView refreshControl={
    <RefreshControl
        refreshing={this.state.refreshing}
        onRefresh={this._onRefresh} />
    }>
</ScrollView>

当你向下滚动屏幕时触发 onRefresh 方法。