Как сделать элемент фиксированным на свитке в React Native? - PullRequest
Новая
       20

Как сделать элемент фиксированным на свитке в React Native?

2 голосов
/ 18 апреля 2019

Это видео того, что у меня есть до сих пор https://drive.google.com/file/d/1tJMZfpe8hcqLcNMYiE-6pzwHX0eLofv1/view?usp=sharing

Я пытаюсь исправить "Доступно на 3 месяца", как только contentOffset.y достиг заголовка.Как и в случае с position: sticky в css.

До сих пор я думал об этом через onScroll prop в компоненте Scroll View, но проблема в том, что у меня уже есть анимации (Animated.Event)от родительского и дочернего компонента, то есть единственный способ сделать это - использовать функцию listener в Animated.Event, но это приведет к супер прерывистой анимации, если для параметра useNativeDriver установлено значениеfalse.

Если установить значение true, все это не сработает (оно аварийно завершится).Ошибка заключается в следующем: «OnScroll - это не функция, это экземпляр Animated.event»

Итак, скажем, у нас есть два компонента, родительский элемент - Parent.js, а дочерний (вид прокрутки) -ChildScrollView.js

У ChildScrollView.js уже есть анимации в представлении прокрутки, но нам нужно добавить еще немного в компонент Parent.js, чтобы сделать с навигацией, которую ChildScrollView.js не может обработать

Так что это закодировано так:

Parent.js

componentWillMount() {
    const { navigation } = this.props
    const { scrollY } = this.state

    const bgColor = scrollY.interpolate({
      inputRange: [HEADER_HEIGHT / 4, HEADER_HEIGHT / 2],
      outputRange: ['transparent', 'rgb(255,255,255)'],
      extrapolate: 'clamp',
    })

    const titleColor = scrollY.interpolate({
      inputRange: [0, HEADER_HEIGHT / 2],
      outputRange: ['transparent', colors.paragraphs],
      extrapolate: 'clamp',
    })

    const titleMarginTop = scrollY.interpolate({
      inputRange: [0, HEADER_HEIGHT / 2],
      outputRange: [HEADER_HEIGHT, 0],
      extrapolate: 'clamp',
    })

    navigation.setParams({
      bgColor,
      titleColor,
      titleMarginTop,
    })
}

onScroll() {
}

render() {

  return (
    <ChildScrollView
      {...childProps}
      onScroll={Animated.event([
        { nativeEvent: { contentOffset: { y: scrollY } } },
      ], {
        useNativeDriver: false, // when I do this, it become super laggy, but setting it to true makes the app crash
        listener: this.onScroll,
      })}
    >
      <MakeMeFixedOnScroll>I could do this in css with "position: sticky"</MakeMeFixedOnScroll>
    </ChildScrollView>
  )
}

И ребенок похож, 

<Animated.ScrollView
 {...props}
 onScroll={Animated.event(
   [{ nativeEvent: { contentOffset: { y: scrollY } } }],
            {
              useNativeDriver: false,
              listener: event => {
                if (onScroll) onScroll(event)
              },
            }
          )}
          scrollEventThrottle={16}
        >

1 Ответ

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

Я бы использовал SectionList 

<SectionList
  renderItem={({item, index, section}) => (
    <Text style={styles[item.type]}>{item.text}</Text>
  )}
  renderSectionHeader={({ section: { title } }) => (
    title && <Text style={styles.sticky}>{title}</Text>
  )}
  sections={[
   { title: null, data: [{
       type: 'heading', text: '133 Random Road'
     }, {
       type: 'heading', text: 'Donnybrook'
     }, {
       type: 'subtitle', text: 'Dublin 4'
     }, {
       type: 'title', text: 'From E1000/month'
     }]
   },
   { title: 'Available For 3 Month', data: [{
       type: 'text', text: 'Beautiful for bedroom...'
     }]
   }
  ]}
  stickySectionHeadersEnabled
/>
...