Question

我正在尝试使用react-native-navigation和来自reduxpersistStore的persistStore启动我的应用程序。我收到警告，功能作为React child无效。如果您返回Component而不是从render返回，则可能会发生这种情况。

是否有任何解决方法可启动此初始屏幕，最近我添加了startApp函数并在render内部调用它。

这是我启动应用程序的初始组件：

 import React, { Component } from "react";
 import { Provider } from "react-redux";
 import { View, Text } from "react-native";
 import { persistStore } from "redux-persist";
 import { Navigation } from "react-native-navigation";
 import Mapbox from "@mapbox/react-native-mapbox-gl";

 import { registerScreens } from "./screens";
 import store from "./store/configureStore";
 import { appInit, getInitialScreen } from "./appInit";
 import { handleErrorObject } from "./lib/handleError";

 Mapbox.setAccessToken("pk.eyJ123425KKbcgNww");

 export default class App extends Component {
  startApp = () => {
    const persistor = persistStore(store, null, () => {
        registerScreens(store, Provider);

        appInit(store)
            .then(() => {
                const initialScreen = getInitialScreen(store.getState());

                Navigation.startSingleScreenApp({
                    screen: {
                        screen: initialScreen
                    },
                    passProps: {
                        persistor
                    },
                    drawer: {
                        left: {
                            screen: "DrawerMenuScreen"
                        }
                    },
                    appStyle: {
                        orientation: "portrait"
                    }
                });
            })
            .catch(error => {
                handleErrorObject("Error initializing app", error);
            });
    });
};
render() {
    return <View>{this.startApp}</View>;
}
}

Answer 1

您的代码有两件事。

startApp 是一个函数，为了呈现从任何函数返回的 JSX ，您需要将其称为{this.startApp()}

startApp内没有任何要返回的 JSX ，因为它只是将值设置为persistStore，并且将包含一个persistor对象

我建议您看看docs和此article，以了解有关react-native-navigation的用法的更多信息

启动React Native应用程序时，我错误认为函数作为React子代无效

1 个答案: