我目前正在使用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',
},
);
非常感谢您对此提供的任何帮助或建议。谢谢!