React native 在屏幕之间滑动不是'；t在react native、react navigation中工作

我正在尝试让我的应用程序使用react导航在屏幕之间滑动。我曾尝试将SwipEnabled、animationEnabled和gesturesEnabled设置为true，但迄今为止没有任何效果

我是新手，我想我会尝试一下

我正在使用createStackNavigator，所以我不知道是否需要更改它

import React, { Component } from 'react';
import { createBottomTabNavigator,
        createStackNavigator, createAppContainer } from 'react-navigation';

const Worcester = createStackNavigator(
      {
        Wrh,
      },
      {
        initalRouteName: Wrh,
          defaultNavigationOptions: {
                  title: 'Worcester',
                  headerLeft: <ActionBarImage />,
                  headerTintColor: '#333333',
                  headerTitleStyle: {
                      fontWeight: 'bold',
                      color: '#000000'
                  },
                  tabBarOptions: {
                    labelStyle: {
                      fontSize: 40
                    }
                  },
                headerStyle: {
                backgroundColor: '#FFFAFA',
                borderBottomColor: '#ffffff',
                borderBottomWidth: 3,
              },
                  HeaderTitle: 'Test',
                  backgroundColor: '#FFDEAD',
                  swipeEnabled: true,
                  animationEnabled: true,
                  gesturesEnabled: true

                }
      });

      const Alex = createStackNavigator(
        {
          Alx,
        },
        {
          initalRouteName: Alx,
          defaultNavigationOptions: {
                  title: 'Redditch',
                  headerLeft: <ActionBarImage />,
                  headerTintColor: '#333333',
                  headerTitleStyle: {
                      fontWeight: 'bold',
                      color: '#000000'
                  },
                  tabBarOptions: {
                    labelStyle: {
                      fontSize: 20
                    }
                  },
                headerStyle: {
                backgroundColor: '#FFFAFA',
                borderBottomColor: '#ffffff',
                borderBottomWidth: 3,
                swipeEnabled: true,
                animationEnabled: true,
                gesturesEnabled: true
              },
            },

      });

    const TabNavigator = createBottomTabNavigator(
      {
        Worcester: { screen: Worcester },
        Redditch: { screen: Alex },
      },
      {
        tabBarOptions: {
           activeTintColor: 'blue',
           inactiveTintColor: '#605F60',
           inactiveBackgroundColor: 'grey',
           activeBackgroundColor: '#FFFAFA',
           labelStyle: {
             fontSize: 20,
             marginTop: 0,
             paddingTop: 0
           },
           style: {
             paddingTop: 10

           },
           swipeEnabled: true,
           animationEnabled: true,
           gesturesEnabled: true


         },

      }
    );

    export default createAppContainer(TabNavigator);

import React，{Component}来自'React'；
导入{CreateBoottomTabNavigator，
createStackNavigator，createAppContainer}来自“反应导航”；
const Worcester=createStackNavigator(
{
啊,，
},
{
初始路由名称：Wrh，
默认导航选项：{
标题：“伍斯特”，
头左：，
标题颜色：“#333333”，
头饰样式：{
fontWeight:'粗体'，
颜色：'#000000'
},
选项卡选项：{
标签样式：{
尺码：40
}
},
头型：{
背景颜色：“#FFFAFA”，
borderBottomColor:“#ffffff”，
边界宽度：3，
},
标题：“测试”，
背景颜色：“#FFDEAD”，
是的，
animationEnabled：没错，
手势启用：正确
}
});
常量Alex=createStackNavigator(
{
Alx，
},
{
初始路由名称：Alx，
默认导航选项：{
标题：“红痒”，
头左：，
标题颜色：“#333333”，
头饰样式：{
fontWeight:'粗体'，
颜色：'#000000'
},
选项卡选项：{
标签样式：{
尺寸：20
}
},
头型：{
背景颜色：“#FFFAFA”，
borderBottomColor:“#ffffff”，
边界宽度：3，
是的，
animationEnabled：没错，
手势启用：正确
},
},
});
const TabNavigator=createBottomTabNavigator(
{
伍斯特：{屏幕：伍斯特}，
Redditch:{screen:Alex}，
},
{
选项卡选项：{
activeTintColor:'蓝色'，
InactiveIntColor:“#605F60”，
inactiveBackgroundColor:“灰色”，
activeBackgroundColor:“#FFFAFA”，
标签样式：{
尺寸：20，
玛金托普：0，
paddingTop:0
},
风格：{
加油站：10
},
是的，
animationEnabled：没错，
手势启用：正确
},
}
);
导出默认createAppContainer（TabNavigator）；

您应该使用topTabNavigator/bottomTabNavigator在同一堆栈上的屏幕之间滑动

然后使用StackNavigator，屏幕如下：

...
import { createMaterialTopTabNavigator, createStackNavigator } from 'react-navigation';
...

const someTabNavigator= createMaterialTopTabNavigator(
    {
        SomeScreen: {
            screen:TheScreen,
            navigationOptions: {
                tabBarAccessibilityLabel: 'The Screen',
                tabBarLabel: ({ tintColor }) => <LabelTitle tintColor={tintColor} label="The Screen" />,
            },
        },



        SomeOtherScreen: {
            screen: TheOtherScreen,
            navigationOptions: {
                tabBarAccessibilityLabel: 'The Other Screen',
                tabBarLabel: ({ tintColor }) => <LabelTitle tintColor={tintColor} label="The Other Screen" />,
            },
        },

    },
    {
        // Configs and etc.
        swipeEnabled: true,
        lazy: true,
        optimizationsEnabled: true,
        animationEnabled: true,
        tabBarPosition: 'top',
        tabBarOptions: {
            scrollEnabled: true,
            style: {
                backgroundColor: colors.white,
            },
            inactiveTintColor: inactiveTintLabelColor,
            activeTintColor: activeTintLabelColor,
            indicatorStyle: {
                backgroundColor: colors.primaryColor,
            },
            tabStyle: {
                width: screen.screenWidth >= 600 ? 210 : 120,
            }
        },
    }
)

。。。
从“反应导航”导入{createMaterialTopTabNavigator，createStackNavigator}；
...
const someTabNavigator=createMaterialTopTabNavigator(
{
SomeScreen：{
屏幕：屏幕，
导航选项：{
tabBarAccessibilityLabel:“屏幕”，
tabBarLabel:（{tintColor}）=>，
},
},
其他屏幕：{
屏幕：另一个屏幕，
导航选项：{
tabBarAccessibilityLabel:“另一个屏幕”，
tabBarLabel:（{tintColor}）=>，
},
},
},
{
//配置等。
是的，
懒惰：是的，
optimizationsEnabled：正确，
animationEnabled：没错，
Tabbar位置：“顶部”，
选项卡选项：{
scrollEnabled:true，
风格：{
背景颜色：colors.white，
},
InactiveIntColor:InactiveIntlabelColor，
activeTintColor:activeTintLabelColor，
指标类型：{
背景颜色：colors.primaryColor，
},
标签样式：{
宽度：屏幕。屏幕宽度>=600？210:120，
}
},
}
)