标签: react-navigation

我正在将我的项目从 升级react-navigation-v4到react-navigation-v5. 我需要在同一屏幕内有两个顶部栏，将屏幕分为两半，但这样做会出现此错误：

错误：已为此容器注册另一个导航器。您可能在单个“导航容器”或“屏幕”下有多个导航器。确保每个导航器位于单独的“屏幕”容器下。

我搜索了很多，我知道我可以嵌套它们，但是如何将它们一起使用？

这是我的代码，给出了错误：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import Page1 from './pages/Page1'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const TopTab = createMaterialTopTabNavigator();
const BottomTab = createMaterialTopTabNavigator();

const TopTabComponent = () => (
  <TopTab.Navigator>
    <TopTab.Screen name='1' component={Page1} />
    <TopTab.Screen name='2' component={Page1} />
  </TopTab.Navigator>
)

const BottomTabComponent = () => (
  <BottomTab.Navigator>
    <BottomTab.Screen name='3' component={Page1} />
    <BottomTab.Screen name='4' component={Page1} />
  </BottomTab.Navigator>
)


export default class App extends React.Component {
  render() …

对于类组件，有“this.props.route.params”选项。如何在反应钩子功能组件中从一个屏幕获取参数到另一个屏幕。

"react": "16.11.0",
"react-native": "0.62.2",
"react-navigation": "@react-navigation/native": "^5.1.2",

我想从底部选项卡导航器中删除图标空间/视图。我尝试通过删除 tabBarIcon 来删除图标，但它不起作用。这是我尝试过的代码和我收到的结果。看起来不太好，标签不在中心。他们看起来好像已经进入了可见屏幕下方。使用的代码：

const TabNavigator = createMaterialBottomTabNavigator(
{
    Home: {
        screen: screen1,
        navigationOptions: {
            // tiitle: "hello"
            // tabBarIcon: () => {
            //     <View></View>
            // },
            tabBarLabel: <Text style={{ fontSize: 15, textDecorationLine: 'underline', }}>Screen1</Text>,
        }
    },
    People: {
        screen: screen2,
        navigationOptions: {
            tabBarLabel: <Text style={{ fontSize: 15, textDecorationLine: 'underline' }}>Screen2</Text>,
            activeColor: '#E8947F',
            inactiveColor: '#C4C9CB',
        }
    },
    Connects: {
        screen: screen3,
        navigationOptions: {
            tabBarLabel: <Text style={{ fontSize: 15, textDecorationLine: 'underline' }}>Screen3</Text>,
            activeColor: '#E8947F',
            inactiveColor: '#C4C9CB',

            // barStyle: { backgroundColor: '#2c6d6a' }, …

我想将 React Navigation v5（抽屉式导航）与 Next.js 一起使用，但我对它们的集成有疑问。

简而言之：基于 React Navigation Screens 组件的 React Navigation（抽屉式导航）。它有条件地呈现正确的屏幕。

问题是： Next.js 有自己的基于文件夹结构的路由系统。例如。/pages 文件夹中的每个文件都会自动生成适当的路线，因此我无法将这些文件添加为 React 导航屏幕（至少我不确定这是否可能）

如何让这些工具协同工作并保存Next.js SSR功能？

React 导航抽屉示例：

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}

function NotificationsScreen({ navigation }) { …

我遇到了一个错误。当我尝试重置屏幕导航堆栈时，出现此错误The action 'Navigation/RESET' was not handled by any navigation

我重置导航的代码是：

 let resetAction = StackActions.reset({
       key: null,
       index: 0,
       actions: [
         NavigationActions.navigate({ routeName: 'ScreenName' })
       ]
    })
 this.props.navigation.dispatch(resetAction)

如果您能建议我任何解决方案，我将非常感激。

目前，TabBarBottom 放置在键盘上方几秒钟，然后它会下降。\ni 希望在键盘打开时完全隐藏 TabBar。

   expo sdk :- 38\n    react-navigation": \xe2\x80\x9c^4.0.9\xe2\x80\x9d,\n    \xe2\x80\x9creact-navigation-tabs\xe2\x80\x9d: \xe2\x80\x9c^2.9.0\xe2\x80\x9d,\n    "Plaform: "Android"\n

我在属于不同导航器的两个屏幕组件之间传递参数时遇到问题。

首先，我有堆栈导航器内的登录组件，然后我有抽屉导航器内的主页组件。等级制度是这样的：

好的，我将在此处显示登录和主页中的完整代码：

（登录组件）

import React, {useState} from 'react';
import {StyleSheet, Text, View, SafeAreaView} from 'react-native';
import {Button, TouchableRipple} from 'react-native-paper';
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from 'react-native-responsive-screen';

import {Container, baseColor} from '../Styles';

const users = [
  {
    id: 72780,
    name: 'Sample 1',
    login: 'videouser1',
    password: 'videouser1',
    color: '#34ad86',
  },
  {
    id: 72781,
    name: 'Sample 2',
    login: 'videouser2',
    password: 'videouser2',
    color: baseColor,
  },
];
const Login = ({navigation}) => {
  const toHome = (user) => { …

只想使地图组件滑动禁用，但在使用“swipeEnabled”时应用了整个屏幕。

我能怎么做？

const Tab = createMaterialTopTabNavigator();

const Tabs = () => {

  return (
    <Tab.Navigator
      swipeEnabled={false}  // <- Screens can be swiped but it is applied to every screen.
      {...}
    >
      <Tab.Screen
        name="Home"
        component={Home}
      />
      <Tab.Screen
        name="Map"
        component={Map}
      /> 
    </Tab.Navigator>
  );
}

const App = () => {
  return (
    <NavigationContainer>
      <SafeAreaView style={styles.safeAreaView} />
      <Tabs />
    </NavigationContainer>
  );
}

使用react-navigation v5，如何将所有屏幕单独包装在滚动视图和键盘安全视图中？

export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Test" component={TestScreen} />
        </Stack.Navigator>
      </NavigationContainer>
  );
}

我收到客户的请求，要求在我们的 React 应用程序中实现深度链接，通过单击链接将它们直接带入已安装的应用程序（可能到达某个点，但尚未确定）。

据我了解，反应本机和反应导航都将其作为它们提供的“链接”中的功能集的一部分来处理。然而，仅仅为了深度链接而导入一个框架似乎有点过分（也许不是）。

在谷歌搜索后，我只能真正找到有关react-native或react-navigation的深层链接的参考。

我最好的行动方案是什么？