Question

我使用 animated.ScrollView 和 animated.View 将标头和标签移动到顶部当用户向上滚动页面时，会以动画方式进行显示。

一切正常，直到这里。

我想在其中一个选项卡中使用带有粘性标头的FlatList。当我使用animation.ScrollView时，FlatList的粘贴头不起作用！

，并在替换时将 animated.ScrollView 替换为 animated.View ，但此解决方法但标题和制表符无法移动到屏幕顶部！

我的代码：

render() {

// Because of content inset the scroll value will be negative on iOS so bring
// it back to 0.
const scrollY = Animated.add(
  this.state.scrollY,
  Platform.OS === 'ios' ? HEADER_MAX_HEIGHT : 0,
);
const headerTranslate = scrollY.interpolate({
  inputRange: [0, HEADER_SCROLL_DISTANCE],
  outputRange: [0, -HEADER_SCROLL_DISTANCE],
  extrapolate: 'clamp',
});

 const backBtn = scrollY.interpolate({
   inputRange: [0,HEADER_SCROLL_DISTANCE / 4, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
  outputRange: [0, 0 , 0, 1],
  extrapolate: 'clamp',
});

const imageOpacity = scrollY.interpolate({
  inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
  outputRange: [1, 1, 0],
  extrapolate: 'clamp',
});
const imageTranslate = scrollY.interpolate({
  inputRange: [0, HEADER_SCROLL_DISTANCE],
  outputRange: [0, 100],
  extrapolate: 'clamp',
});

const titleScale = scrollY.interpolate({
  inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
  outputRange: [1, 1, 0.6],
  extrapolate: 'clamp',
});
const titleTranslate = scrollY.interpolate({
  inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
  outputRange: [0, 0, -8],
  extrapolate: 'clamp',
});

 const tabY = scrollY.interpolate({
inputRange: [0, HEADER_SCROLL_DISTANCE, HEADER_SCROLL_DISTANCE + 1],
outputRange: [0, 0, 1]});

return (
  <View style={styles.fill}>
   <StatusBar
      barStyle="light-content"
      backgroundColor="#333f5b"
    />
    <Animated.ScrollView
      style={styles.fill}
      scrollEventThrottle={1}
      onScroll={Animated.event(
        [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
        { useNativeDriver: true },
      )}
      refreshControl={
        <RefreshControl
          refreshing={this.state.refreshing}
          onRefresh={() => {
            this.get_detail();
            this.get_Comment(this.state.type,this.state.id);
            this.setState({ refreshing: true,
                loadingComment:true,
             });
          }}
          // Android offset for RefreshControl
          progressViewOffset={HEADER_MAX_HEIGHT}
        />
      }
      // iOS offset for RefreshControl
      contentInset={{
        top: HEADER_MAX_HEIGHT,
      }}
      contentOffset={{
        y: -HEADER_MAX_HEIGHT,
      }}
    >
      <Tabs renderTabBar={(props) => <Animated.View
        style={[{
          transform: [{translateY: tabY}],
          zIndex: 1,
          width: "100%",
          backgroundColor: COLOR,
          marginTop:HEADER_MAX_HEIGHT ,
        }, Platform.OS === "ios" ? {paddingTop: 20} : null]}>
        <ScrollableTab {...props} underlineStyle={{backgroundColor: "white"}}/>
      </Animated.View>
      }>
        <Tab heading="MainTab" {...TAB_PROPS}>
          {this._renderMainTab()}

        </Tab>
        <Tab heading="ListTab" {...TAB_PROPS}>
          {this._renderListTab()}
        </Tab>
        <Tab heading="CommentTab" {...TAB_PROPS}>
         {this._renderCommentTab()}
        </Tab>
      </Tabs>

    </Animated.ScrollView>
    <Animated.View
      pointerEvents="none"
      style={[
        styles.header,
        { transform: [{ translateY: headerTranslate }] },
      ]}
    >
      <Animated.Image
        style={[
          styles.backgroundImage,
          {
            opacity: imageOpacity,
            transform: [{ translateY: imageTranslate }],
          },
        ]}
        source={{uri:this.state.top_image}}
      />
    </Animated.View>
    <Animated.View
      style={[
        styles.bar,
        {
          transform: [
            { scale: titleScale },
            { translateY: titleTranslate },
          ],
        },
      ]}
    >
     <Text style={styles.title}>{this.state.title}</Text>

    </Animated.View>
    <Animated.View
      style={[
        styles.backBtn,
        {
          opacity: backBtn,
        },
      ]}
    >
    <Button transparent onPress={this.back}>
     <Icon reverse type="MaterialIcons" name="arrow-back" style={{transform: [{scaleX: I18nManager.isRTL ? -1 : 1}],color:"#fff"}}/>
     </Button>
    </Animated.View>
  </View>);}}

并且FlatList在_renderListTab（）中：

<FlatList style={{backgroundColor: '#eee'}}
    data={this.props.data}
    renderItem={this.renderItem}
    keyExtractor={item => item.title+item.id}
    stickyHeaderIndices={this.props.sticky}/>

如何解决？！

有什么方法可以在带有 animated.ScrollView 的选项卡中的标头上使用FlatList？

如何在Animation.ScrollView中将FlatList与粘性标头一起使用

0 个答案: