android - React-Navigation 添加到现有应用程序

Question

上下文的一些背景......我正在创建一个react-native将存在于它自己的存储库中的应用程序。此应用程序将集成到其他 Web、iOS 和 Android 应用程序中。我目前正在使用 Android 应用程序。这是一个用 Java 编写的现有本机应用程序。

我已经按照React Native Docs用一个超级基本的 React Native 应用程序“包装”了它。出于测试目的，为了模拟最终将成为生产应用程序的内容，我在 Android 应用程序中有一个原生活动，MainActivity带有一个打开第二个活动的按钮，该活动ReactNativeActivity用于加载我的 React Native 应用程序。这是有效的 - 加载 React Native 应用程序。React Native 应用程序有一个按钮，它应该导航到 React Native 应用程序中的第二个屏幕（使用react-navigation）。当我按下该按钮时，它不会导航到堆栈中的下一个屏幕，而是重新加载MainActivity来自原生 Android 应用程序。在网络上运行同样的东西，导航没有问题，所以我知道屏幕连接正确。我对 React Native 并不陌生，但我对与现有的 Native 应用程序集成并不陌生。

编辑以根据要求添加一些代码

导航器和按钮如下：

// navigator.tsx
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import { HomeScreen } from "../screens/Home";
import Demo from "../screens/Demo";

export type NavigationStackParamList = {
  HomeScreen: undefined;
  Demo: undefined;
};

const Stack = createNativeStackNavigator<NavigationStackParamList>();

export const Navigation = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen component={Demo} name="Demo" />
        <Stack.Screen
          component={HomeScreen}
          name="HomeScreen"
          options={{ title: "Home" }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

// Demo Screen
const Demo: React.FC<DemoScreenProps> = ({ navigation }) => {
  return (
    <View style={styles.app}>
      <View style={styles.info}>
        <Text style={styles.title}>Demo</Text>
        <Text>Running on: </Text>
        <Text style={styles.platform}>{Platform.OS}</Text>
      </View>
      <Map />
      <Button
        onPress={() => navigation.navigate("HomeScreen")}
        title="Go to Test Screen"
      />
    </View>
  );
};

按上面的“转到测试屏幕”是导致MainActivity重新加载的原因，而不是正确的屏幕。

标签： androidreact-nativereact-navigation