标签: react-native-navigation

我只是想知道关于这两个源的真实,经验和客观的观点,以实现React Native中的导航:

• 反应导航
• 反应原生导航

哪个更好,为什么.谢谢

运行我的应用程序后出现此错误：

错误：捆绑失败：错误：无法react-native-safe-area-context从node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js以下位置解析模块：在项目中找不到 react-native-safe-area-context。

但是我为我的旧演示所做的同样的事情。它工作得很好。

我不知道我在这里做错了什么。请检查我的代码：

用于安装：

1. 反应本机导航和手势处理程序：

npm install --save react-navigation

npm install --save react-native-gesture-handler

2. 反应原生堆栈：

npm install --save react-navigation-stack

应用程序.js

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import FirstOptionsPage from "./FirstOptionsPage";

const MainNavigator = createStackNavigator(
  {
    FirstOptions: FirstOptionsPage
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        // backgroundColor: '#28F1A6',
        elevation: 0,
        shadowOpacity: 0
      },
      headerTintColor: "#ca375e",
      headerTitleStyle: {
        fontWeight: "bold",
        color: "#161616"
      }
    }
  }
);

const App = createAppContainer(MainNavigator); // For …

我们正在尝试将新的React Native应用程序集成到现有的原生Android应用程序中.遵循RN官方文档,我们设法使其工作,但有一些关于导航的问题.

我们有原生和非原生(JS)屏幕,我们需要一种在所有屏幕之间导航的好方法,无论屏幕是否为原生屏幕.

我们尝试采用本机导航和react-native-navigation来查看是否有任何地址我们的问题,但没有一个实际工作.

目前,我们已经注册了所有我们的RN屏幕,如下所示:

const provide = (store, Screen) => {
      return props => (
        <Provider store={store}>
          <Screen {...props} />
        </Provider>
      );
    };

    const store = configureStore();

    AppRegistry.registerComponent('Home', () => provide(store, HomeComponent));

我们还创建了一个名为"Navigator"的本机模块,该模块具有称为openComponent接受屏幕名称及其道具的导航方法.以下是openComponent外观的实现方式:

// our native module code ...
     @ReactMethod
     public void openComponent(String name, String extra) {

         try {
             Intent intent = new Intent(this.getReactApplicationContext(), MyReactActivity.class);
             intent.putExtra("moduleName", name);
             intent.putExtra("extra", extra);

             getCurrentActivity().startActivityForResult(intent, 0);
         }
         catch (Exception e) {
             e.printStackTrace();
             Crashlytics.logException(e.getCause());
         } …

我必须在3个月内构建一个相对较大的跨平台(iOS和Android)应用程序.

到目前为止,谈到React Native我只有经验NavigatorIOS.虽然我从未真正遇到任何问题,但我从未见过人们推荐使用它.

其他选项Navigator,看起来很简单但可能不允许很多本机UI支持？而NavigatorExperimental我什么都不知道,和单凭这个名字让我担心.我不想做任何最后一分钟的噩梦.

我计划花一个月的时间彻底学习React Native,然后花2个月的时间来构建应用程序.

这使我对我的问题:如果你有打造本土做出反应,你可以使用每个平台,导航,为什么一个跨平台的应用程序？

任何答案或提示非常感谢.

当前行为

• 执行应用程序后未安装报告

bundling failed: Error: Unable to resolve module `
react-native-screens` from `node_modules/react-navigation-tabs/src/navigators/createBottomTabNavigator.js`: react-native-screens could not be found within the project.

您的环境

| 软件| 版本|

| 反应导航 | 3.11.1

| 反应本机 | 0.61.2

| 节点 | 12.13.0

我正在使用react-native与react-native-navigation.我想在显示组件时重新加载数据.当用户单击选项卡导航按钮时,将显示该组件.

我应该使用反应生命周期事件还是反应原生导航中的某些内容可以在用户导航回组件时触发功能？

我正在使用redux,我不确定是否可以用来帮助？

这个问题指的onDisplay是我正在寻找的东西.但是我找不到任何关于它的官方文档 - https://github.com/wix/react-native-navigation/issues/130

我可以想到使用Native Navigation的唯一原因是当我有更多的屏幕和基于JS的解决方案(如React Navigation)将所有屏幕保留在内存中.现在我不是本地开发人员,所以上面的内容可能很模糊.

我是React Native的新手.如何通过调用返回到它之前刷新/重新加载以前的屏幕goBack()？

可以说我们有3个屏幕A,B,C:

A -> B -> C

当我们goBack()从屏幕C 运行时,它返回到屏幕B但是具有旧的状态/数据.我们怎样刷新它？第二次没有调用构造函数.

我必须为 android 重建我的 gradle，现在我遇到了 RNScreens 错误。

Failed to find fragment for React Root View在应用程序中显示。

这是日志猫：

2022-08-20 22:54:02.259 9195-9241/com.testApp.testApp E/WM-WorkerWrapper: Work [ id=b68c8532-e3ae-455d-9d84-a0a859f26e40, tags={ FOCUS_LOST_WORKER_TAG, com.onesignal.OSFocusHandler$OnLostFocusWorker } ] failed because it threw an exception/error\n    java.util.concurrent.ExecutionException: java.lang.NullPointerException: Attempt to invoke virtual method 'android.content.pm.PackageManager android.content.Context.getPackageManager()' on a null object reference\n        at androidx.work.impl.utils.futures.AbstractFuture.getDoneValue(AbstractFuture.java:516)\n        at androidx.work.impl.utils.futures.AbstractFuture.get(AbstractFuture.java:475)\n        at androidx.work.impl.WorkerWrapper$2.run(WorkerWrapper.java:311)\n        at androidx.work.impl.utils.SerialExecutor$Task.run(SerialExecutor.java:91)\n        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)\n        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)\n        at java.lang.Thread.run(Thread.java:919)\n     Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'android.content.pm.PackageManager android.content.Context.getPackageManager()' on a null object reference\n …

我希望能够使用 React Native Navigation v5 隐藏屏幕上的选项卡。

我一直在阅读文档，但似乎他们并没有为 v5 更新这个，它指的是 < v4 的做事方式。

这是我的代码：

import Home from './components/Home';
import SettingsScreen from './components/Settings';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

const SettingsStack = createStackNavigator();
const ProfileStack  = createStackNavigator();

function SettingsStackScreen() {
    return (
        <SettingsStack.Navigator>
            <SettingsStack.Screen name="Settings" component={SettingsScreen} />
        </SettingsStack.Navigator>
    )
}

function ProfileStackScreen() {
    return (
        <ProfileStack.Navigator>
            <ProfileStack.Screen name="Home" component={Home} />
        </ProfileStack.Navigator>
    )
}

const …