标签栏中的播放器组件反应导航，带有手势和动画

问题描述

我想要类似 spotify播放器

示例：

我使用反应导航（使用tabbar function的自定义标签栏）

并且在标签内有2个组件 MiniPlayer 和 Player

MyCode： App.js

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="home" tabBarOptions={{ activeTintColor: '#e91e63',}} tabBar={(props => <MyTabBar {...props} />)}>
      <Tab.Screen name="Home" component={HomeStackScreen}
        options={{
          tabBarLabel: 'Home',tabBarIcon: 'home',}}
      />
      <Tab.Screen name="Search" component={SearchScreen}
        options={{
          tabBarLabel: 'Search',tabBarIcon: 'search',tabBarBadge: 3,}}
      />
      <Tab.Screen name="Librery" component={LibreryScreen}
        options={{
          tabBarLabel: 'Librery',tabBarIcon: 'list',}}
      />
    </Tab.Navigator>
    </NavigationContainer>
  );
}

function MyTabBar({ state,descriptors,navigation }) {
  return (
    <View>
      <Player/>
      <View>
        <MiniPlayer />
      </View>
      <View style={{ flexDirection: 'row'}}>
        {state.routes.map((route,index) => {
          console.log(route);
          const { options } = descriptors[route.key];
          console.log(options);
          const label =
            options.tabBarLabel !== undefined
              ? options.tabBarLabel
              : options.title !== undefined
              ? options.title
              : route.name;

          const icon =
          options.tabBarIcon !== undefined
            ? options.tabBarIcon
            : options.title !== undefined
            ? options.title
            : route.name;

          const isFocused = state.index === index;

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

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

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

          return (
            <TouchableOpacity
              accessibilityRole="button"
              accessibilityStates={isFocused ? ['selected'] : []}
              accessibilityLabel={options.tabBarAccessibilityLabel}
              testID={options.tabBarTestID}
              onPress={onPress}
              onLongPress={onLongPress}
              style={{ flex: 1,justifyContent: "center",alignItems: "center"}}
              key={route.key}
            >
              <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
                {label}
              </Text>
              <Icon name={icon} />
            </TouchableOpacity>
          );
        })}
      </View>
    </View>
  );
}

player.js

export default class MiniPlayer extends React.Component {

  constructor(props) {
    super(props);
    this.state = { 
      PostModalVisible: false
    };

    this.translateY = new Animated.Value(0);
    this.onGes = Animated.event([
      {
        nativeEvent: {
          translationY : this.translateY
        }
      }
    ])

  }

  render(){
    return (
      <PanGestureHandler onGestureEvent={ this.onGes }>
      <Animated.View style={{backgroundColor: '#663399',padding: 90,transform: [{translateY: this.translateY}]}}>
        <Text>Test Player</Text>
      </Animated.View>
    </PanGestureHandler>
    );
  }
};

但是问题是手势在标签栏功能的动画视图中不起作用

如果在其他地方使用组件也可以，但是不能在标签栏（标签栏底部）中使用

解决方法

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

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

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