滚动视图高度不能正常工作，但为什么

Question

我有一个水平滚动视图。我把高度设置为100。但如果我的手指在应用程序的底部，那么我也可以滚动。所以我只想在用户高度为100的情况下滚动。现在我可以在屏幕上任意滚动。

return (
<KeyboardAwareScrollView style={{margin: 0, padding: 0}}>
<View style={{height: height - 150, backgroundColor: '#fff'}}>
<Text style={styles.title}>Storys</Text>
<ScrollView
horizontal={true}
contentContainerStyle={{height: 100, marginLeft: 12, backgroundColor: 'red'}}
scrollEventThrottle={50}
showsHorizontalScrollIndicator={false}
decelerationRate="normal"
>
{
storys.length > 0 
?
storys.map((el, i) => {
return (
<TouchableOpacity key={`index-${i}`} style={{padding: 0, marginRight: 16, borderWidth: 2, justifyContent: 'center', alignItems: 'center', borderRadius: 100, borderColor: 'red', height: 68, width: 68}}>
<Image resizeMode="contain" source={{ uri: `http://xxxx:3000/uploads/${el}`}} style={{height: 55, width: 55, borderRadius: 500}} />
</TouchableOpacity>
)
})
:
<Text>Es sind zurzeit keine Storys vorhanden.</Text>
}
</ScrollView>
</View>
<View style={{flex: 1, paddingLeft: 16, paddingRight: 16, paddingBottom: 12, backgroundColor: '#fff', alignItems: alignItem, justifyContent:'space-between', flexDirection: 'row'}}>
<TouchableOpacity onPress={() => setAddStory(true)}>
<AntDesign name="pluscircleo" size={32} color="#444" />
</TouchableOpacity>
<TextInput
onChangeText={e => setChatMessage(e)} 
onFocus={() => setAlignItem('flex-end')}
onEndEditing={() => handleAlign()}
value={chatMessage}
multiline={true}
style={[styles.input, {height: Math.max(50, areaHeight)}]}
onContentSizeChange={e => {
setAreaHeight(e.nativeEvent.contentSize.height);
}}
placeholder="Gebe eine Nachricht ein..." />
<TouchableOpacity style={{padding: 8, paddingRight: 10, borderRadius: 8, backgroundColor: 'red'}}>
<Ionicons name="paper-plane-outline" size={28} color="#fff" />
</TouchableOpacity>
</View>
</KeyboardAwareScrollView>

Answer 1

您可以通过将ScrollView包装成高度为100的视图来实现这一点，下面的代码将帮助您：

return (
<KeyboardAwareScrollView style={{ margin: 0, padding: 0 }}>
<View style={{ height: height - 150, backgroundColor: "#fff" }}>
<Text style={styles.title}>Storys</Text>
<View style={{ height: 100 }}>
<ScrollView
horizontal={true}
contentContainerStyle={{
height: 100,
marginLeft: 12,
backgroundColor: "red"
}}
scrollEventThrottle={50}
showsHorizontalScrollIndicator={false}
decelerationRate="normal"
>
{storys.length > 0 ? (
storys.map((el, i) => {
return (
<TouchableOpacity
key={`index-${i}`}
style={{
padding: 0,
marginRight: 16,
borderWidth: 2,
justifyContent: "center",
alignItems: "center",
borderRadius: 100,
borderColor: "red",
height: 68,
width: 68
}}
>
<Image
resizeMode="contain"
source={{ uri: `http://xxxx:3000/uploads/${el}` }}
style={{ height: 55, width: 55, borderRadius: 500 }}
/>
</TouchableOpacity>
);
})
) : (
<Text>Es sind zurzeit keine Storys vorhanden.</Text>
)}
</ScrollView>
</View>
</View>
<View
style={{
flex: 1,
paddingLeft: 16,
paddingRight: 16,
paddingBottom: 12,
backgroundColor: "#fff",
alignItems: alignItem,
justifyContent: "space-between",
flexDirection: "row"
}}
>
<TouchableOpacity onPress={() => setAddStory(true)}>
<AntDesign name="pluscircleo" size={32} color="#444" />
</TouchableOpacity>
<TextInput
onChangeText={e => setChatMessage(e)}
onFocus={() => setAlignItem("flex-end")}
onEndEditing={() => handleAlign()}
value={chatMessage}
multiline={true}
style={[styles.input, { height: Math.max(50, areaHeight) }]}
onContentSizeChange={e => {
setAreaHeight(e.nativeEvent.contentSize.height);
}}
placeholder="Gebe eine Nachricht ein..."
/>
<TouchableOpacity
style={{
padding: 8,
paddingRight: 10,
borderRadius: 8,
backgroundColor: "red"
}}
>
<Ionicons name="paper-plane-outline" size={28} color="#fff" />
</TouchableOpacity>
</View>
</KeyboardAwareScrollView>