Как перестроить анимацию iOS Picker в React Native - PullRequest
Новая
       12

Как перестроить анимацию iOS Picker в React Native

0 голосов
/ 25 сентября 2018

Есть ли способ в React Native полностью перестроить компонент выбора iOS в Java Script?Мне не нужен общий инструмент выбора, но обычный вид прокрутки с таким же эффектом затухания, как и в инструменте выбора iOS.

enter image description here

РЕДАКТИРОВАТЬ - Iкажется, я не объяснил свой первоначальный ответ достаточно точно.Вот почему я завершаю это здесь:

Я хочу построить представление прокрутки, которое занимает весь экран.Он не должен давать пользователю возможность выбрать какой-либо элемент, как это делает iOS Picker.Тем не менее, это должен быть «нормальный» вид прокрутки, который показывает пользователю некоторую информацию, например, различные чаты, задачи, новости и т. Д.

Единственное отличие от общего вида прокрутки в React Native должно заключаться в затухании.эффект «вверху» вверху: когда пользователь прокручивает контент вверх, он не должен просто оставлять экран на своем верхнем крае, он должен использовать эффект затухания в iOS Picker (см. рисунок).

Этоэффект затухания состоит из двух частей: во-первых, он повышает прозрачность содержимого с уменьшающейся координатой y.Кроме того, этот контент, похоже, уходит в третье измерение.

Моя проблема в том, что я не вижу способа достижения этой трехмерности контента в React Native.Я должен добавить, что содержимое в моем представлении прокрутки не состоит из небольших одинаковых по размеру элементов (например, текстов «Элемент 1», «Элемент 2», «Элемент 3», ...), но из большегоэлементы разных размеров, например изображения или целые текстовые поля.

Ответы [ 2 ]

0 голосов
/ 14 апреля 2019

Вы можете достичь желаемого эффекта с помощью анимированного API.Идея состоит в том, чтобы установить разные входные диапазоны для элементов в вашем списке.Затем вы подключаете непрозрачность к значению прокрутки вашего ScrollView (или любого компонента списка).Я упростил код, но этого должно быть достаточно, чтобы продемонстрировать идею.

Пример ниже демонстрирует только эффект непрозрачности, но вы можете легко добавить эффект перевода, чтобы получить именно ту анимацию, которую вы ищете.


const data = []; // array that contains the text
const items = [];
for (let i = 0; i < data.length; ++i) {
  const distanceFromViewCenter = Math.abs(i * ITEM_HEIGHT);
  const inputRange = [
    -distanceFromViewCenter - 2 * ITEM_HEIGHT,
    -distanceFromViewCenter - ITEM_HEIGHT,
    -distanceFromViewCenter, // Middle of picker            
    -distanceFromViewCenter + ITEM_HEIGHT,
    -distanceFromViewCenter + 2 * ITEM_HEIGHT,
  ];
  items.push(
    <Animated.View
      style={{
        opacity: this._scrollValue.interpolate({
          inputRange,
          outputRange: [0.0, 0.3, 1.0, 0.3, 0.0],
        }),
      }}
    >
      <Text style={{ height: ITEM_HEIGHT }}>{data[i]}</Text>
    </Animated.View>
  )
}

<ScrollView
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this._scrollValue } } }],
    { useNativeDriver: true }
  )}
>
  {items}
</ScrollView>
0 голосов
/ 25 сентября 2018

Вы можете использовать этот модуль NPM , чтобы получить то, что вы хотите.Этот модуль работает одинаково в Android и iOS.Не изобретай велосипед:)

РЕДАКТИРОВАТЬ: Теперь я понял, что вы хотите.Вы можете попробовать эту закуску, которую я приготовил для вас:

https://snack.expo.io/r1qnxSt9m

Конечно, вам нужно улучшить ее, но это только начало.

...