Question

我正在尝试让我的应用使用反应导航在屏幕之间滑动。我尝试将swipeEnabled，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);

Answer 1

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

然后您使用堆栈导航器，这样的屏幕：

...
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,
            }
        },
    }
)

在屏幕之间滑动不适用于本机，反应导航

1 个答案: