我经常window.location.reload
在我的 React Web 项目中使用。
window.location.reload();
有没有类似的方法可以在 react-native 中重新加载页面(组件)?
我经常window.location.reload
在我的 React Web 项目中使用。
window.location.reload();
有没有类似的方法可以在 react-native 中重新加载页面(组件)?
您提到的是浏览器功能。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 方法。