如何重启应用程序（React Native 和 Expo）

Question

我使用expo，所以我无法访问android文件夹。

我想第一次重新启动我的应用程序。我怎样才能做到这一点？

我使用react-native-restart，但没有工作，我现在有一个错误：

null 不是对象（正在评估 'x.default.restart;）

代码：

  componentDidMount() {
    if (I18nManager.isRTL) {
      I18nManager.forceRTL(false);
      RNRestart.Restart();
    }
  }

如何重新启动我的应用程序？

Answer 1

我遇到同样的问题一个多月了，没有任何帮助，所以我开发了一个库来完成这个任务，简单地安装它：

npm i fiction-expo-restart

然后导入它：

import {Restart} from 'fiction-expo-restart';

然后当您想要重新启动时，请使用：

Restart();

请注意，如果此答案过时，您可以在此处查看库：https://www.npmjs.com/package/fiction-expo-restart

Answer 2

我遇到了同样的问题，并在某处找到了这个解决方案。

您可以尝试使用

Updates

中的

expo

，如下所示：

import { Updates } from 'expo';

Updates.reload();

Answer 3

对于 Expo SDK 45+ 请使用

import * as Updates from "expo-updates"
Updates.reloadAsync()

模块

fiction-expo-restart

不再维护。

Answer 4

import { StatusBar } from "expo-status-bar";
import React from "react";
import { Button, I18nManager, StyleSheet, Text, View } from "react-native";
import * as Updates from "expo-updates";

async function toggleRTL() {
  await I18nManager.forceRTL(I18nManager.isRTL ? false : true);
  await Updates.reloadAsync();
}

export default function App() {
  return (
    <View style={styles.container}>
      <Text>{new Date().toString()}</Text>
      <Text>{I18nManager.isRTL ? "RTL" : "LTR"}</Text>
      <View style={{ marginVertical: 5 }} />
      <Button title="Reload app" onPress={() => Updates.reloadAsync()} />
      <View style={{ marginVertical: 5 }} />
      <Button title="Toggle RTL" onPress={() => toggleRTL()} />
      <StatusBar style="auto" />
    </View>
  );
}

https://github.com/brentvatne/updates-reload/blob/master/App.js 这是我唯一的工作方式。当我尝试在 useEffect 中自动重新加载应用程序时 - 它崩溃了，所以我制作了一个单独的屏幕，要求用户按按钮重新加载应用程序

Answer 5

如果你正在使用

react-native-code-push

库，你可以用这个重新启动；

import CodePush from 'react-native-code-push';
CodePush.restartApp();

Answer 6

我所做的是构建一个 Restart 组件，它不是

const

，而是

var

。还有一个

applyReload()

函数，如果

<></>

bool 状态为 true，则将该 var 设置为空组件

reload

，从而触发重新渲染。

重新渲染会将 Restart

var

恢复到其原始结构，但随后会创建一个新实例，从而有效地重新加载

<Restart>

标签内的所有内容：

我的应用程序.tsx：

export default function App() {
  const [reload, setReload] = useState(false);

  type Props = { children: ReactNode };
  var Restart = ({ children }: Props) => {
    return <>{children}</>;
  };
  const applyReload = () => {
    if (reload) {
      Restart = ({ children }: Props) => {
        return <></>;
      };
      setReload(false);
    }
  };
  useEffect(applyReload);

  useEffect(() => {
    // put some code here to modify your app..

    // test reload after 6 seconds
    setTimeout(() => {
      setReload(true);
    }, 6000);
  }, []);

  return (
    <SafeAreaProvider>
      <SafeAreaView style={{ flex: 1 }}>
        <PaperProvider theme={appTheme}>
          <NavigationContainer theme={appTheme} documentTitle={{ enabled: false }}>
            <AppContext.Provider value={appContext}>
              <Restart>
                <MyMainAppComponent />
              </Restart>
            </AppContext.Provider>
          </NavigationContainer>
        </PaperProvider>
      </SafeAreaView>
    </SafeAreaProvider>
  );

我还在我的“”中添加了“setReload”状态函数，因此在我的应用程序下的任何位置都可以触发应用程序重新加载。

Answer 7

使用Expo 51+ SDK：

    import { reloadAppAsync } from 'expo'
    
    export default function Component() {
       return (
           <Button onPress={() => reloadAppAsync()}>Reload app</Button>
       )
    }