React Native Expo - 无法向下滚动以获取更多内容

Posted 2023-02-19

【中文标题】React Native Expo - 无法向下滚动以获取更多内容

【英文标题】：React Native Expo - Unable to scroll downwards for more content

【发布时间】：2021-04-26 13:07:57

【问题描述】：

我正在尝试创建 Udemy 的模拟移动版本。下面的代码是主页，它应该显示向用户推荐的所有各种课程。当我让水平滚动工作时，尽管知道下面有内容，但我无法向下滚动以获取更多内容。目前我只能查看到第二个 FlatList 并且无法向下滚动以获取更多信息。

我尝试过的：

在视图中包装 ScrollView 在 ScrollView 中包装视图 为 ScrollView 和 View 添加 flex:1 为 ScrollView 添加 flexGrow:1 为 ScrollView 添加 padding:10 为 ScrollView 添加 contentContainerStyle= flex: 1

如果这些信息有帮助，我也会使用 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 从 V4 转到 V5）

    "@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"

【参考方案1】：

ScrollView 是一个不继承使用 flex 的组件。 如果您的 homeScreen 组件仅包含 ScrollView，我建议您 用 View 包装 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;