Сильная запаздывающая анимация с Animated.event () в React Native - PullRequest
Новая
       20

Сильная запаздывающая анимация с Animated.event () в React Native

0 голосов
/ 03 февраля 2020

Я разрабатываю приложение в React-Native и у меня есть анимированный элемент под заголовком моего StackNavigator. И под этим анимированным элементом у меня есть FlatList с некоторыми Json -данными в нем.

Так что моя проблема в том, что анимация плавная в симуляторе Xcodes iPhone, но не на моем фактическом устройстве OnePlus 6T.

Установка выбрасывается в Expo Project, и вот мой код: 

export const window = Dimensions.get("window");
export const MAX_HEADER_HEIGHT = window.width / 5;
export const MIN_HEADER_HEIGHT = window.width / 1000;
export const MAX_BORDER_RADIUS = 450;
export const MIN_BORDER_RADIUS = -450;

HomeScreen. js

this.state = {
  scrollY: new Animated.Value(0)
};    


render() {
const { scrollY } = this.state;
const headerHeight = scrollY.interpolate({
  inputRange: [0, MAX_HEADER_HEIGHT],
  outputRange: [MAX_HEADER_HEIGHT, MIN_HEADER_HEIGHT],
  extrapolate: "clamp"
});

const borderRadius = scrollY.interpolate({
  inputRange: [0, MAX_BORDER_RADIUS],
  outputRange: [MAX_BORDER_RADIUS, MIN_BORDER_RADIUS],
  extrapolate: "clamp"
});

return (
  <View style={{ flex: 1 }}>
    <Animated.View
      style={{
        height: headerHeight,
        justifyContent: "center",
        alignItems: "center",
        overflow: "hidden"
      }}
    >
      <StatusBar barStyle="light-content" />
      <Animated.View
        style={{
          borderRadius: borderRadius,
          width: window.width * 2,
          height: window.width * 2,
          position: "absolute",
          bottom: 0,
          overflow: "hidden"
        }}
      >
        <View
          style={{
            height: window.width / 1.7,
            width: window.width,
            position: "absolute",
            bottom: 0,
            marginLeft: window.width / 2,
            backgroundColor: "#ee6e73"
          }}
        />
      </Animated.View>
    </Animated.View>
    <FlatList
      data={items}
      renderItem={({ item }) => (
        <JobItem
          title={item.title}
          type={item.type}
          description={item.description}
          style={styles.item}
          openOffer={() => this._openOffer()}
        />
      )}
      keyExtractor={item => item.id}
      scrollEventThrottle={10000000}
      onScroll={Animated.event([
        { nativeEvent: { contentOffset: { y: this.state.scrollY } } }
      ])}
    ></FlatList>

Я уже пробовал useNativeDriver: true в Animated.event (), но это не помогает. Я также попытался поиграть со значением scrollEventThrottle={}, но оно также не имеет никакого эффекта.

Пожалуйста, помогите

...