реагировать на родную - навигация по разделам - PullRequest
Новая
       43

реагировать на родную - навигация по разделам

0 голосов
/ 23 января 2020

Я пытаюсь создать страницу настроек, которая позволяет пользователю изменять метаданные. Есть строки, такие как Имя, Телефон, Возраст, Пол и так далее. Пользователь может нажать на строку, и соответствующая страница настройки будет скользить справа. Я использую SectionList для рендеринга этих строк. Каждая строка представляет собой элемент, завернутый в TapGestureHandler, и имеет брата Animated.View, который оборачивает страницу настройки. Однако страница вставки не перекрывает весь экран, а только строку, которую я нажала. Есть ли типичный способ решения этой проблемы? Вот фрагмент кода:

Любые предложения будут с благодарностью. 

import React, { useState } from "react";
import { View, Dimensions, Animated, SectionList, Text } from 'react-native'; 
import { TapGestureHandler, State } from 'react-native-gesture-handler'; 

const DATA = [
  {
    title: 'section 1', 
    data: ['data 11', 'data 12']
  }, 
  {
    title: 'section 2', 
    data: ['data 21', 'data 22']
  }, 
  {
    title: 'section 3', 
    data: ['data 3']
  }
]

export default function App() {
  return (
    <SectionList 
      keyExtractor={(item, index) => item + index}
      sections={DATA}
      renderSectionHeader={({ section }) => <Text style={{color: 'red'}}>{section.title}</Text>}
      stickySectionHeadersEnabled={false}
      renderItem={({ item }) => <Item />}
    />
  )
}

const { width, height } = Dimensions.get('screen'); 
function Item(props) {
  const pan = new Animated.ValueXY({x: width, y: 0}); 
  return (
    <View style={{flex:1}}>
      <TapGestureHandler onHandlerStateChange={slideIn}>
        <View style={{width: '100%', minHeight: 40, backgroundColor: 'green'}} />
      </TapGestureHandler>
      <Animated.View style={{position: 'absolute', width, height, transform:[{translateX: pan.x}]}}>
        <View style={{width, height, backgroundColor: 'yellow'}} />
      </Animated.View>
    </View>
  )

  function slideIn({ nativeEvent }) {
    const { state } = nativeEvent; 
    if(state === State.END) Animated.spring(pan, {toValue: {x: 0, y: 0}}).start(); 
  }
}
...