Высота дочерних элементов ScrollView относительно контейнера - PullRequest
Новая
       59

Высота дочерних элементов ScrollView относительно контейнера

0 голосов
/ 12 апреля 2020

Я хочу создать прокручиваемый поток представлений, высота которых составляет 80% от контейнера. Мой код в настоящее время выглядит как 

const FeedItem = () => (
  <View style={styles.feedItem}>
    <Text>Hello</Text>
  </View>
);

const Feed = () => (
  <ScrollView style={styles.feed} contentContainerStyle={styles.feedContentContainer}>
    <FeedItem />
    <FeedItem />
    <FeedItem />
  </ScrollView>
);

const App = () => (
  <View style={styles.app}>
    <Feed />
  </View>
);

const styles = StyleSheet.create({
  app: {
    flex: 1,
  },
  feed: {
    height: '100%',
  },
  feedContentContainer: {
    height: '80%',
  },
  feedItem: {
    height: '100%',
  },
});

Однако это приводит к тому, что представление прокрутки больше не прокручивается. Согласно тому, что я прочитал, это как-то связано с flex, и я пробовал так много подходов к этому в течение 2 дней безрезультатно. Кто-нибудь знает правильный подход к настройке высоты, не путая прокрутку в представлении?

Я также испытываю ту же проблему в FlatList, так что, надеюсь, ответ для ScrollView также применим к FlatList. Спасибо!

Ответы [ 3 ]

1 голос
/ 15 апреля 2020

Поскольку ScrollView не имеет своей собственной высоты и зависит от его дочерних элементов для высоты. Лучше установить высоту для дочернего узла.

Например, , если вы устанавливаете высоту 80% для дочернего элемента из полной высоты устройства.

Мы можем сделать это как 

import { useSafeArea } from 'react-native-safe-area-context';
import { Dimensions } from "react-native";
const insets = useSafeArea();
const { height } = Dimensions.get("window");

А в вашем JS

height: ((height - insets.top - insets.bottom) * 80(your percentage))/ 100

Вы устанавливаете эту высоту для дочерних элементов.

Примечание: Я использую этот внешний библиотека для вставок.

0 голосов
/ 17 апреля 2020

просто внесите эти изменения 

const styles = StyleSheet.create({
  app: {
    flex: 1,
  },
  feed: {
    height: '100%',
  },
  feedContentContainer: {
    //height: '80%',
  },
  feedItem: {
    //height: '100%',
    flexGrow: 1
  },
});

никогда не ставьте высоту для прокрутки просмотра контейнера содержимого. и каждый дочерний элемент не должен иметь высоту 100%, потому что он занимает полный контейнер и не позволяет другим дочерним элементам

0 голосов
/ 15 апреля 2020

Наличие высоты в% с ScrollView, кажется, нарушено на Android. Можете ли вы удалить всю свою высоту и добавить View компонент поверх вашей ScollView со сгибанием 0,8

Также, если текст FeedItem не заполняет всю высоту ScrollView, он не будет прокручиваться, поэтому вы можете добавить больше текста на FeedItem. 

const FeedItem = () => (
  <View style={styles.feedItem}>
    <Text>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
          </Text>
  </View>
);

const Feed = () => (
  <View style={{ flex: 0.8}}>
    <ScrollView style={styles.feed} contentContainerStyle={styles.feedContentContainer} scrollEnabled>
      <FeedItem />
      <FeedItem />
      <FeedItem />
      <FeedItem />
    </ScrollView>
  </View>
);

const App = () => (
  <View style={styles.app}>
    <Feed />
  </View>
);

const styles = StyleSheet.create({
  app: {
    flex: 1,
  },
  feed: {

  },
  feedContentContainer: {

  },
  feedItem: {

  },
});
...