标签: react-native-navigation

有没有办法按下标签栏而不渲染组件屏幕？我一直在传递空函数，但它仍然呈现空白屏幕。我希望无论你按什么键，它都会保留在主屏幕上。

我正在尝试解决 React Native 导航的错误Non-serializable values were found in the navigation state. Alert > params.action[0].onPress (Function)。我不认为该函数没有像错误指出的那样传递给参数，但每次我按下图标时它都会返回相同的错误。如果有任何建议或意见，我将不胜感激。

export default function Alert({ route, navigation }) {
  const { colors } = useTheme();
  const { t } = useTranslation();
  const { title, message, action, option, type } = route?.params;
  const success = type === "success";
  useEffect(() => {
    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      () => !option?.cancelable
    );

    return () => backHandler.remove();
  }, [option?.cancelable]);

  const renderButtonFirst = () => {
    const firstTitle = …

我对 React Native 和 React Native Navigation 还很陌生。我收到一条错误消息：

    "message": "No overload matches this call.\n  Overload 1 of 2, '(...args: never): void', gave the following error.\n    Argument of type 'string' is not assignable to parameter of type 'never'.\n  Overload 2 of 2, '(options: never): void', gave the following error.\n    Argument of type 'string' is not assignable to parameter of type 'never'.",

关于'Signup'. 以前，我没有遇到这个问题，而且我似乎无法弄清楚为什么会发生这种情况。我发现的所有示例都与导航问题无关。我尝试添加<RootStackParamList>到navigation.navigate<RootStackParamList>('Conversation')，但这只会导致另一个错误，并且将其添加到useNavigation没有执行任何操作。我真的很感激任何关于我为什么会遇到这个问题的帮助或建议。谢谢你！

主屏幕.tsx

import React, { useState, useEffect } from 'react';
import …

我对 react-navigation 选项卡导航器有问题。屏幕内容未显示/屏幕为空白。有任何想法吗 ？这是我的导航器结构：

import { StackNavigator, TabNavigator } from 'react-navigation';
import PeopleList from './PeopleList';
import CompanyList from './CompanyList';
import AddPerson from './AddPerson';
const Navigation = TabNavigator({
  People: { screen: PeopleList },
  Person: { screen: AddPerson },
  Company: { screen: CompanyList },
 }, {
 tabBarOptions: {
  activeTintColor: 'white',
  inactiveTintColor: '#80cbc4',
  swipeEnabled: true,
  showLabel: false,
  style: {
    backgroundColor: '#26a69a',
  },
 },
});
export default Navigation;

更新：

这是包含渲染方法的 App.js 文件：

    import React, {Component} from 'react';
    import {StyleSheet, Text, View} from 'react-native';
    import …

所以,有一个屏幕我正在使用javascript导航栏而不是react-native-navigation导航(因为这个bug).

我需要显示一个后退按钮,如果它可以返回(如果它不是堆栈中的第一个屏幕).

有什么方法可以检查它是否可以返回？像navigator.canBoBack()或的东西navigator.getCurrentScreenStack().lenght > 1.

我有一个非常简单的配置来反应原生导航

Navigation.startTabBasedApp({
  tabs: [
    {
      label: "One",
      screen: "example.FirstTabScreen",
      title: "Screen One"
    },
    {
      label: "Two",
      screen: "example.SecondTabScreen",
      title: "Screen Two"
    }
  ]
}

我在文档中找不到任何用于从屏幕 1 滑动到屏幕 2 的 API。您知道这是否可能吗？

当我用。运行react native项目时，react-native run-ios它在我的iOS模拟器上显示以下错误。在我的android模拟器上，这完全没问题。我已删除节点模块并重新安装。但是错误仍然存​​在。我不想完全删除我的ios / build文件夹，因为我在其中手动添加了库依赖项，并且第三方库在我的本机项目中正常工作。有人可以帮我吗？

错误信息

需要未知模块“ 11”。如果确定模块在那里，请尝试重新启动Metro Bundler。您可能还需要运行yarn或npm install（取决于您的环境）。

package.json

{
  "name": "AwwsomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-native-navigation": "^1.1.473",
    "react-native-vector-icons": "^4.6.0"
  },
  "devDependencies": {
    "babel-jest": "23.2.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "23.2.0",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

我有下一个布局：

    Navigation.setRoot( {
        root: {
            sideMenu: {
                right: {
                    component: {
                        id: 'sideDrawer',
                        name: DRAWER,
                    }
                },
                center: {
                    bottomTabs: {
                        id: 'bottomTabs',
                        children: [
                            {
                                stack: {
                                    children: [
                                        {
                                            component: {
                                                id: 'searchTab',
                                                name: SEARCH_TAB,
                                                options: {
                                                    bottomTab: {
                                                        text: 'Search',
                                                        icon: iconsMap[ 'search' ],
                                                        testID: 'searchTab',
                                                    },
                                                    topBar,
                                                }
                                            }
                                        }
                                    ]
                                }
                            },
                            {
                                stack: {
                                    children: [
                                        {
                                            component: {
                                                id: 'secondTab',
                                                name: SECOND_TAB,
                                                options: {
                                                    bottomTab: {
                                                        text: 'Second Tab',
                                                        icon: iconsMap[ 'random' ], …

这是我的应用程序的简化流程：

1. 登录
2. 主页（具有用于颜色图或创建图的选项）
3. colorInDiagram（用户为图表的各个部分上色）
4. 付款
5. 主页（返回首页）

现在，在此之后，如果用户决定再次为图表着色，他/她将从主页中选择该特定选项，并且流程将照常继续。发生这种情况的原因是，付款后，用户将返回首页（已加载），并且所有其他屏幕都会重置。随着应用程序全面发展。在colorInDiagram中调用ComponentWillUnmount。

我要处理的是：

如果用户在执行第3步（为该图着色）时关闭了该应用程序，则在重新打开该应用程序时，我已经对其进行了编码，以从停止使用该应用程序的位置恢复。但是，当用户完成着色和付款后，由于该应用程序直接从colorInDiagram组件启动，因此他/她没有返回首页。主页首次加载。