react-native - 嵌套导航器中的反应视图变得对点击/触摸没有响应

Question

我正在开发一个 Expo 管理的 React Native 应用程序，并且在堆栈导航器中嵌套了一个底部选项卡导航器。我正在使用反应导航。选项卡导航器本身具有嵌套的堆栈导航器。结构如下：

- Stack navigator in App.js
   - Stack navigator
   - Bottom Tab navigator with 3 tabs 
     - Tab 1: Basic view component 
     - Tab 2: Stack navigator
     - Tab 3: Stack navigator

我遇到的问题是底部选项卡导航器视图对 TouchableOpacity 元素上的点击变得无响应。滚动视图仍然有效，但没有别的（例如，我无法离开页面，打开模式等）。

奇怪的是，这个问题会持续一段时间，然后消失。如果我在无响应的屏幕上等待，它最终会触发它最初没有响应的点击。

过去有人遇到过类似的问题吗？

标签： react-nativeexporeact-navigationreact-navigation-v5

Answer 1

我已经创建了您想要的内容的某种克隆。

请参阅此Snack 中的工作示例。

据此，我AppNavigator.js看起来像这样 -

import React from 'react';
import { View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { useTheme } from '@react-navigation/native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

import TabScreenOne from '../screens/TabScreenOne';
import TabScreenTwo from '../screens/TabScreenTwo';
import TabScreenThree from '../screens/TabScreenThree';
import HomeScreen from '../screens/HomeScreen';
import CollectionsScreen from '../screens/CollectionsScreen';

const Tab = createMaterialBottomTabNavigator();

const MainStack = createStackNavigator();

const InnerStack = createStackNavigator();

function InnerStackFNC() {
  return (
    <InnerStack.Navigator>
      <InnerStack.Screen name="HomeScreen" component={HomeScreen} />
      <InnerStack.Screen
        name="CollectionsScreen"
        component={CollectionsScreen}
      />
    </InnerStack.Navigator>
  );
}

function Tabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="TabOne" component={TabScreenOne} />
      <Tab.Screen name="TabTwo" component={TabScreenTwo} />
      <Tab.Screen name="TabThree" component={TabScreenThree} />
    </Tab.Navigator>
  );
}

function AppNavigator() {
  return (
    <MainStack.Navigator>
      <MainStack.Screen
        name="InnerStack"
        component={InnerStackFNC}
        options={{ headerShown: false }}
      />
      <MainStack.Screen name="Tabs" component={Tabs} />
    </MainStack.Navigator>
  );
}

export default AppNavigator;

然后在我的App.js

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import Constants from 'expo-constants';

import AppMavigator from './navigation/AppNavigator';

export default function App() {
  return (
    <NavigationContainer>
      <AppMavigator />
    </NavigationContainer>
  );
}