时间戳

首页 > 解决方案 > 反应导航 createMaterialTopTabNavigator swipeEnabled 不起作用

reactjs - 反应导航 createMaterialTopTabNavigator swipeEnabled 不起作用

问题描述

我是 react-native 的新手。我正在尝试创建一个导航选项卡，该选项卡可以通过点击路线或水平滑动来在不同路线之间切换。

我正在使用 react-navigation链接的 createMaterialTopTabNavigator

我按照文档进行了操作，但滑动不起作用。

我的导航文件：

import { createAppContainer } from 'react-navigation';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';

import HomeScreen from '../screens/home/HomeView';
import SettingsScreen from '../screens/settings/SettingsView';

const TabScreen = createMaterialTopTabNavigator(
  {
    Home: { screen: HomeScreen },
    Settings: { screen: SettingsScreen },
  },
  {
    initialRouteName: 'Home',
    tabBarPosition: 'top',
    swipeEnabled: true,
    lazy: true,
    animationEnabled: true,
    tabBarOptions: {
      activeTintColor: '#FFFFFF',
      inactiveTintColor: '#F8F8F8',
      style: {
        backgroundColor: '#633689',
      },
      labelStyle: {
        textAlign: 'center',
      },
      indicatorStyle: {
        borderBottomColor: '#87B56A',
        borderBottomWidth: 2,
      },
    },
  }
);

const AppNavigator = createStackNavigator({
  TabScreen: {
    screen: TabScreen,
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#633689',
      },
      headerTintColor: '#FFFFFF',
      title: 'TabExample',
    },
  },
});

export default createAppContainer(AppNavigator);

我的主屏幕和设置屏幕：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
    class SettingScreen extends Component {
      render() {
        return (
          <View>
            <Text>
              Setting
            </Text>
          </View>
        );
      }
    }

    export default SettingScreen;

我正在使用以下软件包：

"react": "16.8.6",
"react-native": "0.60.5",
"react-native-gesture-handler": "^1.4.1",
"react-native-reanimated": "^1.2.0",
"react-navigation": "^4.0.2",
"react-navigation-stack": "^1.5.4",
"react-navigation-tabs": "^2.4.1",

标签： reactjsreact-nativereact-navigation

解决方案

我阅读了文档并意识到我错过了添加 Andriod 实现，甚至忘记了修改 MainActivity.java。

只需阅读此页面https://reactnavigation.org/docs/en/material-top-tab-navigator.html，https://reactnavigation.org/docs/en/getting-started.html并按照指南进行更改在 Andriod 和 IOS 文件中。

推荐阅读