实战

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

安卓版本album-tab标签无法获取到点击事件

来源：11-11 手势响应系统（4）

小资要奋斗

2021-03-17

1、rn版本63.
图片描述

import React from 'react';
import {
  Animated,
  Image,
  NativeScrollEvent,
  NativeSyntheticEvent,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {useHeaderHeight} from '@react-navigation/stack';
import {RootState} from '@/models/index';
import {connect, ConnectedProps} from 'react-redux';
import {RouteProp} from '@react-navigation/core';
import {
  ModelStackNavigation,
  RootStackNavigation,
  RootStackParamList,
} from '@/navigator/index';
// import Qian from '@/assets/qian.png';
import {BlurView} from '@react-native-community/blur';
import Tab from './Tab';
import {
  NativeViewGestureHandler,
  PanGestureHandler,
  PanGestureHandlerStateChangeEvent,
  State,
  TapGestureHandler,
} from 'react-native-gesture-handler';
import {viewportHeight} from '@/utils/index';
import {IProgram} from '@/models/album';

const mapStateToProps = ({album}: RootState) => {
  return {
    summary: album.summary,
    author: album.author,
  };
};

const connector = connect(mapStateToProps);

type ModelState = ConnectedProps<typeof connector>;

interface IProps extends ModelState {
  headerHeight: number;
  route: RouteProp<RootStackParamList, 'Album'>;
  navigation: ModelStackNavigation;
}
const HEADER_HEIGHT = 260;
export const USE_NATIVE_DRIVER = true;

class Album extends React.Component<IProps> {
  panRef = React.createRef<PanGestureHandler>();
  tapRef = React.createRef<TapGestureHandler>();
  nativeRef = React.createRef<NativeViewGestureHandler>();
  RANGE = [-(HEADER_HEIGHT - this.props.headerHeight), 0];
  translationY = new Animated.Value(0);
  lastScrollY = new Animated.Value(0);
  lastScrollYValue = 0;
  reverseLastScrollY = Animated.multiply(
    new Animated.Value(-1),
    this.lastScrollY,
  );
  translationYValue = 0;
  translateYOffset = new Animated.Value(0);
  translateY = Animated.add(
    Animated.add(this.translationY, this.reverseLastScrollY),
    this.translateYOffset,
  );
  componentDidMount() {
    const {dispatch, route, navigation} = this.props;
    const {id} = route.params.item;
    dispatch({
      type: 'album/fetchAlbum',
      payload: {
        id,
      },
    });
    // navigation.setParams({
    // opacity: this.translateY.interpolate({
    //   inputRange: this.RANGE,
    //   outputRange: [1, 0],
    // }),
    // });
    navigation.setOptions({
      headerTitleStyle: {
        opacity: this.translateY.interpolate({
          inputRange: this.RANGE,
          outputRange: [1, 0],
        }),
      },
      headerBackground: () => {
        return (
          <Animated.View
            style={[
              styles.headerBackground,
              {
                opacity: this.translateY.interpolate({
                  inputRange: this.RANGE,
                  outputRange: [1, 0],
                }),
              },
            ]}
          />
        );
      },
    });
    // Animated.timing(this.translateY, {
    //   toValue: -170,
    //   duration: 3000,
    //   useNativeDriver: false,
    // }).start();
  }

  renderHeader = () => {
    const {summary, author, route} = this.props;
    const {title, image} = route.params.item;
    return (
      <View style={[styles.haeder]}>
        <Image source={{uri: image}} style={styles.background} />
        <BlurView
          style={StyleSheet.absoluteFillObject}
          blurAmount={4}
          blurType="light"
        />
        <View style={styles.leftView}>
          <Image source={{uri: image}} style={styles.thumbnail} />
          {/* <Image source={Qian} style={styles.coverRight} /> */}
        </View>
        <View style={styles.rightView}>
          <Text style={styles.title}>{title}</Text>
          <View style={styles.summary}>
            <Text style={styles.summaryText} numberOfLines={1}>
              {summary}
            </Text>
          </View>
          <View style={styles.author}>
            <Image source={{uri: author.avatar}} style={styles.avator} />
            <Text style={styles.name}>{author.name}</Text>
          </View>
        </View>
      </View>
    );
  };
  onItemPress = (data: IProgram, index: number) => {
    const {navigation} = this.props;
    navigation.navigate('Detail');
  };
  onScrollDrag = Animated.event(
    [{nativeEvent: {contentOffset: {y: this.lastScrollY}}}],
    {
      useNativeDriver: USE_NATIVE_DRIVER,
      listener: ({nativeEvent}: NativeSyntheticEvent<NativeScrollEvent>) => {
        this.lastScrollYValue = nativeEvent.contentOffset.y;
      },
    },
  );
  onGestureEvent = Animated.event(
    [{nativeEvent: {translationY: this.translationY}}],
    {
      useNativeDriver: USE_NATIVE_DRIVER,
    },
  );
  onHandlerStateChange = ({nativeEvent}: PanGestureHandlerStateChangeEvent) => {
    if (nativeEvent.oldState === State.ACTIVE) {
      let {translationY} = nativeEvent;
      // Animated.value
      translationY -= this.lastScrollYValue;
      this.translateYOffset.extractOffset();
      this.translateYOffset.setValue(translationY);

      // value  = value+ offset
      this.translateYOffset.flattenOffset();
      this.translationY.setValue(0);
      this.translationYValue += translationY;
      let maxDeltaY = -this.RANGE[0] - this.translationYValue;
      if (this.translationYValue < this.RANGE[0]) {
        this.translationYValue = this.RANGE[0];
        Animated.timing(this.translateYOffset, {
          toValue: this.RANGE[0],
          // duration: 1000,
          useNativeDriver: USE_NATIVE_DRIVER,
        }).start();
        maxDeltaY = this.RANGE[1];
      } else if (this.translationYValue > this.RANGE[1]) {
        this.translationYValue = this.RANGE[1];
        Animated.timing(this.translateYOffset, {
          toValue: this.RANGE[1],
          // duration: 1000,
          useNativeDriver: USE_NATIVE_DRIVER,
        }).start();
        maxDeltaY = -this.RANGE[0];
      }
      if (this.tapRef.current) {
        const tap: any = this.tapRef.current;
        tap.setNativeProps({
          maxDeltaY,
        });
      }
    }
  };
  onBottomPress = () => {
    console.log('点击了了上面的view');
  };
  render() {
    return (
      <TapGestureHandler ref={this.tapRef} maxDeltaY={-this.RANGE[0]}>
        <View style={styles.container}>
          <PanGestureHandler
            ref={this.panRef}
            simultaneousHandlers={[this.tapRef, this.nativeRef]}
            onGestureEvent={this.onGestureEvent}
            onHandlerStateChange={this.onHandlerStateChange}>
            <Animated.View
              style={[
                styles.container,
                {
                  transform: [
                    {
                      translateY: this.translateY.interpolate({
                        inputRange: this.RANGE,
                        outputRange: this.RANGE,
                        extrapolate: 'clamp',
                      }),
                    },
                  ],
                },
              ]}>
              {this.renderHeader()}
              <View
                style={{height: viewportHeight - this.props.headerHeight}}
                onMagicTap={this.onBottomPress}>
                <Tab
                  panRef={this.panRef}
                  tapRef={this.tapRef}
                  nativeRef={this.nativeRef}
                  onScrollDrag={this.onScrollDrag}
                  onItemPress={this.onItemPress}
                />
              </View>
            </Animated.View>
          </PanGestureHandler>
        </View>
      </TapGestureHandler>
    );
  }
}
const styles = StyleSheet.create({
  haeder: {
    height: HEADER_HEIGHT,
    flexDirection: 'row',
    paddingHorizontal: 20,
    paddingTop: 70,
    alignItems: 'center',
  },
  background: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: '#eee',
  },
  leftView: {
    marginRight: 23,
  },

  thumbnail: {
    width: 98,
    height: 98,
    borderColor: '#fff',
    borderWidth: StyleSheet.hairlineWidth,
  },
  coverRight: {
    height: 98,
    position: 'absolute',
    right: -20,
    resizeMode: 'contain',
  },
  rightView: {
    flex: 1,
  },
  title: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '900',
  },
  summaryText: {
    color: '#fff',
  },
  name: {
    color: '#fff',
  },
  summary: {
    backgroundColor: 'rgba(0,0,0,0.3)',
    padding: 10,
    marginVertical: 10,
    borderRadius: 4,
  },
  author: {
    flexDirection: 'row',
  },
  avator: {
    height: 26,
    width: 26,
    borderRadius: 13,
  },
  container: {
    flex: 1,
  },
  headerBackground: {
    flex: 1,
    backgroundColor: '#fff',
    opacity: 0,
  },
});
function Wrapper(props: IProps) {
  const headerHeight = useHeaderHeight();
  return <Album {...props} headerHeight={headerHeight} />;
}
export default connector(Wrapper);
写回答

3回答

HaganWu

2021-06-09

解决了吗?

0
0

小资要奋斗

提问者

2021-03-18

import {IProgram} from '@/models/album';
import React from 'react';
import {
NativeScrollEvent,
NativeSyntheticEvent,
Platform,
StyleSheet,
} from 'react-native';
import {
NativeViewGestureHandler,
PanGestureHandler,
TapGestureHandler,
} from 'react-native-gesture-handler';
import {SceneRendererProps, TabBar, TabView} from 'react-native-tab-view';
import Interoduction from './Interoduction';
import List from './List';

interface IRoute {
key: string;
title: string;
}
interface IState {
routes: IRoute[];
index: number;
}

export interface ITabProps {
panRef: React.RefObject<PanGestureHandler>;
tapRef: React.RefObject<TapGestureHandler>;
nativeRef: React.RefObject<NativeViewGestureHandler>;
onScrollDrag: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
onItemPress: (data: IProgram, index: number) => void;
}

class Tab extends React.Component<ITabProps, IState> {
state = {
routes: [
{key: 'interoduction', title: '简介'},
{key: 'album', title: '节目'},
],
index: 1,
};
renderTabBar = (props: SceneRendererProps & {navigationState: IState}) => {
return (
<TabBar
{...props}
scrollEnabled
tabStyle={styles.tabStyle}
activeColor={'#333'}
inactiveColor={'#999'}
labelStyle={styles.label}
style={styles.tabBar}
indicatorStyle={styles.indicator}
/>
);
};
onIndexChange = (index: number) => {
console.log('点击了', index);
this.setState({
index,
});
};
renderScene = ({route}: {route: IRoute}) => {
const {panRef, tapRef, nativeRef, onScrollDrag, onItemPress} = this.props;
switch (route.key) {
case 'interoduction':
return <Interoduction />;
case 'album':
return (
<List
panRef={panRef}
tapRef={tapRef}
nativeRef={nativeRef}
onScrollDrag={onScrollDrag}
onItemPress={onItemPress}
/>
);
}
};
render() {
return (
<TabView
navigationState={this.state}
onIndexChange={this.onIndexChange}
renderScene={this.renderScene}
renderTabBar={this.renderTabBar}
/>
);
}
}
const styles = StyleSheet.create({
tabStyle: {
width: 80,
},
label: {},
tabBar: {
backgroundColor: '#fff',
...Platform.select({
android: {
elevation: 0,
borderBottomColor: '#e3e3e3',
borderBottomWidth: StyleSheet.hairlineWidth,
},
}),
},
indicator: {
backgroundColor: '#eb6d48',
borderLeftWidth: 15,
borderRightWidth: 15,
borderColor: '#fff',
},
});
export default Tab;


0
0

今朝

2021-03-17

看一下Tab组件

0
2
今朝
回复
小资要奋斗
你安装的react-native-tab-view是3.0.0版本的吧，确实有这个问题，我正在做RN升级，等我搞好了再告诉你
2021-03-19
共2条回复

跨平台应用ReactNative+TypeScript仿喜马拉雅开发App

从入门到实战，掌握用TypeScript开发ReactNative应用

832 学习 · 339 问题

查看课程

相似问题

安卓端点击播放音频没有反应

回答 1

安卓轮播图正常加载，ios轮播图无法加载

回答 5

Album渲染tabBar的时候样式没有渲染出来

回答 2

点击失效

回答 1

topTabBarWrapper里面这个下划线如果设置宽度无法居中显示

回答 6

打开慕课网App查看更多内容