使屏幕位于标签 React Native 下方

问题描述

我正在尝试制作一个可折叠的标签栏，我想我快完成了。唯一阻碍我的是 ScrollView 顶部的空白空间（参见 GIF）。我正在使用 React Navigation 和 MaterialTopTabNavigator。理想情况下，我想使用某种 zIndex 将标签栏放在屏幕顶部而不是屏幕上方。我已经尝试将屏幕顶部位置更改为负数并使用高度而不是顶部位置，但这并没有产生预期的结果。我很想从你们那里得到一些灵感。 :)

const Tab = createMaterialTopTabNavigator();

import Tabs from '../components/tabs';

const TabNavigator = () => {
  return (
    <Tab.Navigator tabBar={(props) => <Tabs {...props} />}>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Spendings" component={Spendings} />
    </Tab.Navigator>
  );
};

import {MaterialTopTabBarProps} from '@react-navigation/material-top-tabs';
import React,{useEffect,useRef,useState} from 'react';
import {Animated,deviceeventemitter,TouchableOpacity} from 'react-native';

const Tabs: React.FunctionComponent<MaterialTopTabBarProps> = (props) => {
  const tabAnimation = useRef(new Animated.Value(0)).current;
  const [scrollDirection,setScrollDirection] = useState('');
  let offset = 0;
  useEffect(() => {
    deviceeventemitter.addListener('scrollEmitter',(e) => {
      moveTabs(e.nativeEvent.contentOffset.y);
    });
  },[]);

  const moveTabs = (y: number) => {
    const currentOffset = y;
    var direction =
      currentOffset < offset || currentOffset < 70
        ? 'up'
        : currentOffset > offset
        ? 'down'
        : 'unclear';
    offset = currentOffset;
    setScrollDirection(direction);
  };

  useEffect(() => {
    if (scrollDirection == 'up')
      Animated.spring(tabAnimation,{
        tovalue: 0,useNativeDriver: false,}).start();
    else {
      Animated.spring(tabAnimation,{
        tovalue: -70,}).start();
    }
  },[scrollDirection]);

  return (
    <Animated.View
      style={[
        {
          height: 50,flexDirection: 'row',},{top: tabAnimation},]}>
      {props.state.routes.map((route: any,index: any) => {
        const {options} = props.descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = props.state.index === index;

        const onPress = () => {
          const event = props.navigation.emit({
            type: 'tabPress',target: route.key,canPreventDefault: true,});

          if (!isFocused && !event.defaultPrevented) {
            props.navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          props.navigation.emit({
            type: 'tabLongPress',});
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityState={isFocused ? {selected: true} : {}}
            accessibilityLabel={options.tabBaraccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{
              flex: 1,backgroundColor: 'lightgrey',margin: 1,alignItems: 'center',justifyContent: 'center',}}>
            <Animated.Text style={{opacity: 1,zIndex: 2}}>
              {label}
            </Animated.Text>
          </TouchableOpacity>
        );
      })}
    </Animated.View>
  );
};

export default Tabs;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）