Блог

Я пытаюсь создать макет мобильной версии Udemy. Следующий код — это домашняя страница, на которой должны отображаться все различные курсы, рекомендованные пользователям. Хотя я запускаю горизонтальную прокрутку, я не могу прокрутить вниз для получения большего содержимого, несмотря на то, что знаю, что под ним есть содержимое. В настоящее время я могу просматривать только до 2-го FlatList и не могу прокручивать вниз для получения дополнительной информации.

Что я пробовал:

1. Перенос ScrollView в View
2. Перенос представления в ScrollView
3. Добавление {flex:1} как для ScrollView, так и для View
4. Добавление {flexGrow:1} для ScrollView
5. Добавление {padding:10} для ScrollView
6. Добавление contentContainerStyle={{ flex: 1}} для ScrollView

Я также использую нижний навигатор из React Navigation V5, если эта информация полезна.

HomeScreen.js

 import React from 'react';
import { ScrollView, Text, StyleSheet, View, FlatList } from 'react-native';
import { mapping } from '../../mapping';
import Course from '../components/Course';

const HomeScreen = (props) => {
  return (
    <ScrollView>
      <Text style={styles.mainText}>What to learn next</Text>
      <Text style={styles.bodyText}>Recommended for you</Text>
      <FlatList
        horizontal
        data={mapping}
        style={styles.listStyle}
        renderItem={(item) => {
          return <Course item={item.item} />;
        }}
      />

      <Text style={styles.bodyText}>Featured</Text>
      <FlatList
        horizontal
        data={mapping}
        style={styles.listStyle}
        renderItem={(item) => {
          return <Course item={item.item} />;
        }}
      />

      <Text style={styles.bodyText}>
        Because you viewed 'Introduction to Programming'
      </Text>
      <FlatList
        horizontal
        data={mapping}
        style={styles.listStyle}
        renderItem={(item) => {
          return <Course item={item.item} />;
        }}
      />

      <Text style={styles.bodyText}>
        Because you viewed 'Python Programming'
      </Text>
      <FlatList
        horizontal
        data={mapping}
        style={styles.listStyle}
        renderItem={(item) => {
          return <Course item={item.item} />;
        }}
      />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  background: {
    flex: 1,
  },
  mainText: {
    fontSize: 30,
    fontWeight: 'bold',
    padding: 15,
  },
  bodyText: {
    fontSize: 20,
    fontWeight: 'bold',
    paddingLeft: 15,
  },
  listStyle: {
    marginHorizontal: 15,
    paddingBottom: 30,
  },
});

export default HomeScreen;
 

зависимости (PS. игнорируйте некоторые зависимости, поскольку я только что перешел с React Navigation с версии 4 на версию 5)

     "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.3",
    "@react-navigation/native": "^5.9.0",
    "expo": "~40.0.0",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-gesture-handler": "^1.8.0",
    "react-native-reanimated": "^1.13.2",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.15.0",
    "react-native-web": "~0.13.12",
    "react-navigation": "^4.4.3",
    "react-navigation-bottom-tabs-no-warnings": "^5.11.3",
    "react-navigation-stack": "^2.10.2"
 

ScrollView — это компонент, который не наследует использование flex. В случае, если ваш компонент рабочего стола содержит только ScrollView, я бы рекомендовал вам обернуть ваш ScrollView представлением и задать для него высоту. В противном случае я бы установил flex: 1 для представления и flex: x / y в зависимости от желаемого соотношения.

 import React from 'react';
import { ScrollView, Text, StyleSheet, View, FlatList } from 'react-native';
import { mapping } from '../../mapping';
import Course from '../components/Course';

const HomeScreen = (props) => {
  return (
    <View style={styles.containerStyle}>
    <ScrollView>
      <Text style={styles.mainText}>What to learn next</Text>
      <Text style={styles.bodyText}>Recommended for you</Text>
      <FlatList
        horizontal
        data={mapping}
        style={styles.listStyle}
        renderItem={(item) => {
          return <Course item={item.item} />;
        }}
      />

      <Text style={styles.bodyText}>Featured</Text>
      <FlatList
        horizontal
        data={mapping}
        style={styles.listStyle}
        renderItem={(item) => {
          return <Course item={item.item} />;
        }}
      />

      <Text style={styles.bodyText}>
        Because you viewed 'Introduction to Programming'
      </Text>
      <FlatList
        horizontal
        data={mapping}
        style={styles.listStyle}
        renderItem={(item) => {
          return <Course item={item.item} />;
        }}
      />

      <Text style={styles.bodyText}>
        Because you viewed 'Python Programming'
      </Text>
      <FlatList
        horizontal
        data={mapping}
        style={styles.listStyle}
        renderItem={(item) => {
          return <Course item={item.item} />;
        }}
      />
    </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  containerStyle: {
    height:300,
  },
  mainText: {
    fontSize: 30,
    fontWeight: 'bold',
    padding: 15,
  },
  bodyText: {
    fontSize: 20,
    fontWeight: 'bold',
    paddingLeft: 15,
  },
  listStyle: {
    marginHorizontal: 15,
    paddingBottom: 30,
  },
});

export default HomeScreen;