React Native Expo -无法向下滚动查看更多内容

Question

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

我已经试过了:

1. 在View内包装ScrollView
2. 在ScrollView中包装视图
3. 为ScrollView和View添加{flex:1}
4. 为ScrollView添加{flexGrow:1}
5. 为ScrollView添加{padding:10}
6. 为ScrollView添加contentContainerStyle={{flex: 1}}

如果这些信息有帮助，我也使用React导航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导航从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"

Answer 1

ScrollView是一个不继承flex使用的组件。如果你的主屏幕组件只包含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;