React Navigation 5 Верхняя панель с прокруткой FlatList и динамикой c Высота - PullRequest
Новая
       47

React Navigation 5 Верхняя панель с прокруткой FlatList и динамикой c Высота

0 голосов
/ 31 марта 2020

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

Я пытался создать его, используя React Navigation 5 Top Tab Navigator https://reactnavigation.org/docs/material-top-tab-navigator и FlatList, но не уверен, что это правильный способ сделать это.

Компонент экрана профиля 

const ProfileScreen = () => (
  <>
    <FlatList
      data={null}
      ListHeaderComponent={
        <View style={{ marginBottom: 20 }}>
          // Added the component and navigator here because of scrolling capabilities
          <UserInfo />
          <Tab.Navigator>
            <Tab.Screen name="Images" component={ImageScreen} />
            <Tab.Screen name="TaggedImages" component={TaggedImageScreen} />
          </Tab.Navigator>
        </View>
      }
    />
  </>
)

Экран изображения 

const ImageScreen = () => (
  <>
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View>
          <Image src={item} />
        </View>
      )}
    />
  </>
)

Экран с меткой изображения 

const TaggedImageScreen = () => (
  <>
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View>
          <Image src={item} />
        </View>
      )}
    />
  </>
)

Есть несколько вопросов / проблем с этим:

Высота навигатора вкладок не является динамической c относительно его уважаемого компонента - это означает, что если у меня есть 3 изображения в Компонент Image Screen и 10 изображений в Компонент экрана с тегами , высота увеличится до компонента Экран с тегами * Компонент 1030 * (для обоих)

Причина использования FlatList в моем Компонент профиля объясняется тем, что я хочу иметь возможность прокручивать компонент (аналогично профилю Instagram).

Таким образом, это приводит к следующему вопросу: является ли использование навигатора вкладок в компоненте заголовка списка в FlatList лучшим методом делать что-то похожее на IG? Есть ли другой способ справиться с этой функцией?

...