Question

我正在尝试创建类似于此动画标题：

https://raw.githubusercontent.com/maphongba008/react-native-animated-header/master/demo/android-gif.gif

完成此操作后，我意识到这在IOS上可以正常工作，但在Android上，当我滚动标题并且主体开始晃动时

https://user-images.githubusercontent.com/1559822/29156651-a664489e-7dc0-11e7-93f8-eb9878b47924.gif

代码如下：

import React, { Component } from "react";
import { Animated } from "react-native";

import { query } from "src/api";
import PostList from "src/components/PostList/PostList";
import ContentSwitcher from "src/components/ContentSwitcher/ContentSwitcher";
import User from "src/components/User/User";
import {
  HeaderCardHeight,
  AnnouncementCardHeight
} from "src/screens/ScreenDimensions";

class Explore extends Component {
  constructor(props) {
    super();
    this.HEADER_MAX_HEIGHT = HeaderCardHeight;
    this.HEADER_MIN_HEIGHT = 120;
    this.HEADER_SCROLL_DISTANCE =
      this.HEADER_MAX_HEIGHT - this.HEADER_MIN_HEIGHT;

    this.state = {
      scrollY: new Animated.Value(0),
      selectedType: "news"
    };

    this.headerHeight = this.state.scrollY.interpolate({
      inputRange: [0, this.HEADER_SCROLL_DISTANCE],
      outputRange: [this.HEADER_MAX_HEIGHT, this.HEADER_MIN_HEIGHT],
      extrapolate: "clamp"
    });

    this.queries = {
      news: query.newsList(props.user),
      events: query.eventsList(props.user)
    };
  }

  render() {
    const { selectedType, scrollY } = this.state;

    return (
      <>
        <Animated.View
          style={{
            height: this.headerHeight
          }}
        >
          <ContentSwitcher
            type={selectedType}
            contentSelector={a => this.setState({ selectedType: a })}
          />
        </Animated.View>

        <PostList
          style={{ position: "absolute", top: 0 }}
          margin={this.headerHeight}
          scrollEventThrottle={0}
          onScroll={Animated.event([
            { nativeEvent: { contentOffset: { y: scrollY } } }
          ])}
          layout={selectedType}
          query={this.queries[selectedType]}
        />
      </>
    );
  }
}

export default User(Explore);

有解决这个问题的主意吗？

谢谢

Answer 1

这是由弹跳效果引起的。您可以尝试添加：

          alwaysBounceVertical={false}
          bounces={false}

<PostList
          style={{ position: "absolute", top: 0 }}
          margin={this.headerHeight}
          scrollEventThrottle={0}
          onScroll={Animated.event([
            { nativeEvent: { contentOffset: { y: scrollY } } }
          ])}
          layout={selectedType}
          query={this.queries[selectedType]}
          alwaysBounceVertical={false}
          bounces={false}
        />

React Native-动画视图在Android上动摇

1 个答案: