为什么 react-native-onboarding-swiper 在我的初始屏幕上不起作用？

Question

我创建了一个用于 React Native 研究的应用程序。完成后，我添加了一些演示屏幕并添加了 'react-native-onboarding-swiper'，这在我看来是我找到的最简单的方法。我还添加了 '@react-native-async-storage/async-storage'，在添加启动画面之前，应用程序在没有 AsyncStorage

的情况下运行

这个想法是当我们安装并第一次打开它时，应用程序会显示演示屏幕，然后，它会在我显示的菜单屏幕中打开。

再次编辑：

我需要更正此情况，以便启动画面仅在应用程序首次启动时显示，然后应启动到主屏幕。 2 - 主屏幕是我在屏幕截图中显示的那个，它显示了 "Go Back" 的按钮。我需要它消失

我不能使用 headerShown: false，因为如果我必须有 "Go Back" 按钮，则在应用程序的其他屏幕中如何用最简单的方式解决这些问题？

图片

该应用程序与我在下面显示的 App.js 中的代码完美配合，但只要打开该应用程序，它就会显示演示屏幕。我已经创建了一个条件来纠正这个问题，因为我需要显示屏幕，在第一次打开应用程序时增加。这是添加 else if:

之前 App.js 的样子

import "react-native-gesture-handler";
import React, { useEffect } from "react";

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import AsyncStorage from "@react-native-async-storage/async-storage";
import SplashScreen from "react-native-splash-screen";

import NuevaOrden from "./views/NuevaOrden";
import OnboardingScreen from "./views/OnboardingScreen";

const Stack = createStackNavigator();

const App = () => {

//Hide Splash screen on app load.
  React.useEffect(() => {
    SplashScreen.hide();
  })  return (
    <>
      <FirebaseState>
        <PedidoState>
          <NavigationContainer>
            <Stack.Navigator
              screenOptions={{
                headerStyle: {
                  backgroundColor: "#FFDA00",
                },
                headerTitleStyle: {
                  fontWeight: "bold",
                },
                headerTintColor: "#000",
              }}
            >
              <Stack.Screen
                name="OnboardingScreen"
                component={OnboardingScreen}
                options={{
                  title: "Restaurante Paky",
                }}
              />

              <Stack.Screen
                name="NuevaOrden"
                component={NuevaOrden}
                options={{
                  title: "Restaurante Paky"
                }}
              />

              <Stack.Screen
                name="Menu"
                component={Menu}
                options={{
                  title: "Menú",
                  headerRight: props => <BotonResumen />
                }}
              />

              <Stack.Screen
                name="DetallePlato"
                component={DetallePlato}
                options={{
                  title: null
                }}
              />

              <Stack.Screen
                name="FormularioPlato"
                component={FormularioPlato}
                options={{
                  title: "Mi Pedido"
                }}
              />

              <Stack.Screen
                name="ResumenPedido"
                component={ResumenPedido}
                options={{
                  title: "Resumen Pedido"
                }}
              />

              <Stack.Screen
                name="ProgresoPedido"
                component={ProgresoPedido}
                options={{
                  title: "Progreso de Pedido"
                }}
              />
            </Stack.Navigator>
          </NavigationContainer>
        </PedidoState>
      </FirebaseState>
    </>
  );
};

export default App;

一切正常，但是当我将应用程序放入 else if 中时，它出现故障并显示以下错误：

ExceptionsManager.js: 180

TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator] () method.
This error is located at:
    in App (at renderApplication.js: 48)
    in RCTView (at View.js: 32)
    in View (at AppContainer.js: 106)
    in RCTView (at View.js: 32)
    in View (at AppContainer.js: 133)
    in AppContainer (at renderApplication.js: 41)
    in restaurantapp (RootComponent) (at renderApplication.js: 57)

我已经找了解决方案没有成功，我只需要在我们第一次使用应用程序时显示启动画面，然后应用程序从主菜单启动这是我的问题：

1 - 我能以某种方式得到这个吗？ 2 - 我可以在不使用 AsyncStorage 的情况下添加演示屏幕吗？

我展示涉及的文件：

文件App.js

import "react-native-gesture-handler";
import React, { useEffect } from "react";

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import AsyncStorage from "@react-native-async-storage/async-storage";

import OnboardingScreen from "./views/OnboardingScreen";

const Stack = createStackNavigator();

const App = () => {
  const [isFirstLaunch, setIsFirstLaunch] = React.useEffect(null);

  useEffect(() => {
    AsyncStorage.getItem("alreadyLaunched").then((value) => {
      if (value == null) {
        AsyncStorage.setItem("alreadyLaunched", "true");
        setIsFirstLaunch(true);
      } else {
        setIsFirstLaunch(false);
      }
    });
  }, []);

  if (isFirstLaunch === null) {
    return null;
  } else if (isFirstLaunch === true) {
    return (
      <>
        <FirebaseState>
          <PedidoState>
            <NavigationContainer>
              <Stack.Navigator
                screenOptions={{
                  headerStyle: {
                    backgroundColor: "#FFDA00",
                  },
                  headerTitleStyle: {
                    fontWeight: "bold",
                  },
                  headerTintColor: "#000",
                }}
              >
                <Stack.Screen
                  name="OnboardingScreen"
                  component={OnboardingScreen}
                  options={{
                    title: "Restaurante Paky",
                  }}
                />

                <Stack.Screen
                name="NuevaOrden"
                component={NuevaOrden}
                options={{
                  title: "Restaurante Paky"
                }}
              />

              <Stack.Screen
                name="Menu"
                component={Menu}
                options={{
                  title: "Menú",
                  headerRight: props => <BotonResumen />
                }}
              />

              <Stack.Screen
                name="DetallePlato"
                component={DetallePlato}
                options={{
                  title: null
                }}
              />

              <Stack.Screen
                name="FormularioPlato"
                component={FormularioPlato}
                options={{
                  title: "Mi Pedido"
                }}
              />

              <Stack.Screen
                name="ResumenPedido"
                component={ResumenPedido}
                options={{
                  title: "Resumen Pedido"
                }}
              />

              <Stack.Screen
                name="ProgresoPedido"
                component={ProgresoPedido}
                options={{
                  title: "Progreso de Pedido"
                }}
              />
              </Stack.Navigator>
            </NavigationContainer>
          </PedidoState>
        </FirebaseState>
      </>
    );
  } else {
    return <NuevaOrden />;
  }
};

export default App;

文件OnboardingScreen.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator, useNavigation } from "@react-navigation/stack";
import {
  View,
  Text,
  Button,
  Image,
  StyleSheet,
  TouchableOpacity,
} from "react-native";
import Onboarding from "react-native-onboarding-swiper";

const Dots = ({ selected }) => {
  let backgroundColor;

  backgroundColor = selected ? "rgba(0, 0, 0, 0.8)" : "rgba(0, 0, 0, 0.3)";

  return (
    <View
      style={{
        width: 6,
        height: 6,
        marginHorizontal: 3,
        backgroundColor,
      }}
    />
  );
};



const Next = ({ ...props }) => (
  <Button title="Next" color="#000000" {...props} />
);

const Done = ({ ...props }) => (
  <TouchableOpacity style={{ marginHorizontal: 8 }} {...props}>
    <Text style={{ fontSize: 16 }}>Done</Text>
  </TouchableOpacity>
);
const OnboardingScreen = ({ navigation }) => {
  return (
    <Onboarding
      SkipButtonComponent={Skip}      
      DoneButtonComponent={Done}
      DotComponent={Dots}
      onSkip={() => navigation.navigate("NuevaOrden")}       
      onDone={() => navigation.navigate("NuevaOrden")}
      pages={[
        {
          backgroundColor: "#a6e4d0",
          image: <Image source={require("../assets/onboarding-img1.png")} />,
          title: "Onboarding 1",
          subtitle: "Done with React Native Onboarding Swiper",
        },
        {
          backgroundColor: "#fdeb93",
          image: <Image source={require("../assets/onboarding-img2.png")} />,
          title: "Onboarding 2",
          subtitle: "Done with React Native Onboarding Swiper",
        },
        {
          backgroundColor: "#e9bcbe",
          image: <Image source={require("../assets/onboarding-img3.png")} />,
          title: "Onboarding 3",
          subtitle: "Done with React Native Onboarding Swiper",
        },
      ]}
    />
  );
};

export default OnboardingScreen;

Answer 1

您似乎需要在 NavigationContainer 组件内渲染 NuevaOrden 组件，请尝试使用 and 运算符 && 有条件地渲染入职屏幕，并在您的入职组件调用中 navigation.replace 而不是 navigation.navigate 以将 NuevoPedido 屏幕设置为。

import "react-native-gesture-handler";
import React, { useEffect } from "react";

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import AsyncStorage from "@react-native-async-storage/async-storage";

import OnboardingScreen from "./views/OnboardingScreen";

const Stack = createStackNavigator();

const App = () => {
  const [isFirstLaunch, setIsFirstLaunch] = React.useState(null);

  useEffect(() => {
    AsyncStorage.getItem("alreadyLaunched").then((value) => {
      if (value == null) {
        AsyncStorage.setItem("alreadyLaunched", "true");
        setIsFirstLaunch(true);
      } else {
        setIsFirstLaunch(false);
      }
    });
  }, []);

  if (isFirstLaunch === null) {
    return null;
  } else {
    return (
      <>
        <FirebaseState>
          <PedidoState>
            <NavigationContainer>
              <Stack.Navigator
                screenOptions={{
                  headerStyle: {
                    backgroundColor: "#FFDA00",
                  },
                  headerTitleStyle: {
                    fontWeight: "bold",
                  },
                  headerTintColor: "#000",
                }}
              >
                {isFirstLaunch && (
                  <Stack.Screen
                    name="OnboardingScreen"
                    component={OnboardingScreen}
                    options={{
                      title: "Restaurante Paky",
                    }}
                  />
                )}
                <Stack.Screen
                  name="Nueva Orden"
                  component={NuevaOrden}
                  options={{
                    title: "Nueva orden",
                  }}
                />
                <Stack.Screen
                  name="Menu"
                  component={Menu}
                  options={{
                    title: "Restaurante Paky",
                  }}
                />
                ... here the rest of your screens
              </Stack.Navigator>
            </NavigationContainer>
          </PedidoState>
        </FirebaseState>
      </>
    );
  }
};

export default App;

在您的入职培训组件中

      onSkip={() => navigation.replace("NuevaOrden")}       
      onDone={() => navigation.replace("NuevaOrden")}

为什么 react-native-onboarding-swiper 在我的初始屏幕上不起作用？

Why isn't react-native-onboarding-swiper working on my splash screen?

javascript

splash-screen

reactjs

react-native

use-effect