添加阴影以响应滚动上的导航顶部标签导航器

时间:2019-03-04 18:54:00

标签: javascript react-native react-navigation

我目前正在使用react-navigation渲染屏幕,将它们附加在堆栈中,并创建顶部标签导航以在它们之间导航。

我遇到了一个障碍,因为我试图在用户滚动时在顶部选项卡导航中添加阴影。如果不滚动,则顶部选项卡导航将处于其正常状态,没有阴影/高程。

你们知道我该怎么实现吗?

这是我当前正在使用顶部标签导航器的方式(由于没有滚动行为,阴影/高程被设置为none):

const Tabs = createMaterialTopTabNavigator(
  {
    Curated: {
      screen: Curated,
      navigationOptions: {
        tabBarLabel: props => <TabItem title={text.text_curated} {...props} />,
      },
    },
    All: {
      screen: All,
      navigationOptions: {
        tabBarLabel: props => <TabItem title={text.text_all} {...props} />,
      },
    },
  },
  {
    tabBarOptions: {
      style: {
        backgroundColor: colors.$white,
        shadowOffset: {
          width: 0,
          height: 0,
        },
        shadowColor: colors.$transparent,
        shadowOpacity: 0,
        shadowRadius: 0,
        elevation: 0,
        borderBottomWidth: 1,
        borderBottomColor: colors.$grey,
        paddingLeft: metrics.$unitOne,
      },
      indicatorStyle: {
        height: metrics.$constIndicatorHeightThin,
        backgroundColor: colors.$green_1,
        width: metrics.$deviceWidth / 2.4,
        marginLeft: metrics.$unitOne,
      },
      tabStyle: {
        paddingHorizontal: 0,
        alignItems: 'flex-start',
        width: metrics.$deviceWidth / 2.3,
      },
    },
    swipeEnabled: true,
    lazy: true,
    initialRouteName: 'Curated',
  },
);

非常感谢您对此提供的任何帮助或建议。谢谢!

0 个答案:

没有答案