React Native ScrollView不会以子大小展开

Question

我正在构建一个应用程序，该应用程序使用Map方法来构建几个不同的组件。我有一个包含整个页面的滚动视图。目前，尽管在网上尝试了似乎每一点建议，但滚动视图不会扩展到包含所有内容。

我尝试过将滚动视图放在另一个视图中，但这仍然不能很好地结合不同的flex配置。有人知道为什么这个页面不起作用吗。我将其与其他页面进行了比较，似乎没有理由不扩展flex。

感谢

render(){
return (
<ScrollView contentContainerStyle={{flexGrow: 1}} >
<View style={styles.pageContainer}>
<View style={styles.photoShowcase }>
{
this.state.images.map((item, key) => (
<Image key = {key} source={{uri: item}} style = {{width: 200, height: 200}} />
))
}
</View>
<View style = {styles.cameraContainer}>
<TouchableHighlight onPress={this.handleChoosePhoto}>
<Icon type='font-awesome' name='photo' size={60} />
</TouchableHighlight>
<Icon type='font-awesome' name='camera' size={120} />
<Icon type='font-awesome' name='map-o' size={60} />
</View>
<View style= {styles.detailsContainer}>
<View >
<TextInput onChangeText={(text) => {this.setState({title: text})}} style = {styles.title} >New Day Title </TextInput>
</View>
<View style = {styles.description}>
<TextInput onChangeText={(text) => {this.setState({description: text})}} multiline={true}>Description for the text goes here</TextInput>
</View>
</View>
<View style = {styles.friendsContainer}>
<View>
<Text style = {styles.friendsSectionTitle}>I spent today with: </Text>
</View>
<ScrollView horizontal= {true}>             
<View style={styles.peopleContainer}>
{
this.state.friends.map((item, key) => (
<View key={key} >
<TouchableHighlight >
<PersonEntryBox  name={item.name} backgroundImageToUse={item.image} style = {styles.smallBox} functionToRun = {() => {this.state.selectedFriends.push(item)}} />
</TouchableHighlight>
</View>
))
}
</View>
</ScrollView>                
</View>
<View style={{height: '40%', width: '100%'}}>
<MapView 
style={{...StyleSheet.absoluteFillObject}}
initialRegion={{
latitude: 45.5209087,
longitude: -122.6705107,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
onPress={this.handlePress}
>
{this.state.markers.map((marker) => {
return (
<Marker {...marker} >
<View style={styles.marker}>
<Text style = {styles.markerText}>{marker.cost}</Text>
</View>
</Marker>
)
})}
</MapView>
</View>
<View style = {styles.ratingsButtonContainer}>
<RateTheDayBox style={styles.badDay} dayRating="Bad" onClick={() => {this.state.rating ="red"; this.storeDay()}}></RateTheDayBox>
<RateTheDayBox style={styles.okayDay} dayRating="Okay" onClick={() => {this.state.rating = "yellow"; this.storeDay()}}></RateTheDayBox>
<RateTheDayBox style={styles.greatDay} dayRating="Great" onClick={() => {this.state.rating = "green"; this.storeDay()}}></RateTheDayBox>
</View>
</View>
</ScrollView>
);
}}

const styles = StyleSheet.create({
pageContainer: {
paddingTop: 50,
alignItems: 'center',
flex: 1,
},
mapContainer:{
flex: 1,   
},
marker: {
backgroundColor: "#550bbc",
padding: 5,
borderRadius: 5,
},
text: {
color: '#FFF',
fontWeight: "bold",
},
photoShowcase: {
flex: 1,
flexDirection: 'row',
alignItems: 'flex-start',
justifyContent: 'flex-end',
zIndex: 0,
height: 200
},
cameraContainer: {
flexDirection: 'row',
paddingTop:20,
paddingLeft: '5%',
paddingRight: '5%',
width: '100%',
height: '25%',
alignItems: 'center',
justifyContent: 'space-around',
},
iconStyles: {
marginLeft: 10,
color: 'red',
},
detailsContainer: {
width: '100%',
height: '35%',
},
title: {
paddingLeft: 10,
fontSize: 40,
textDecorationLine: 'underline',
},
description: {
paddingLeft: 11,
paddingTop: 10,
},
friendsContainer: {
width: '100%',
height: '20%',
},
boxContainers: { 
flexDirection: 'row',
},
friendsSectionTitle: {
paddingLeft: 10,
fontSize: 30,
},
ratingsButtonContainer: {
width: '100%',
height: '20%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between'
},
badDay: {
backgroundColor: 'red',
},
okayDay: {
backgroundColor: 'yellow',
},
greatDay: {
backgroundColor: 'green',
},
peopleContainer: { 
paddingTop: 10,
flex: 1, 
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center', 
alignItems: 'center' ,
width: '100%',
height: '100%',
},
});

编辑：对于任何患有相同问题的人，请删除身高百分比。这为我解决了这个问题。

Answer 1

也许只是使用样式而不是contentContainerStyle？医生说：

这些样式将应用于滚动视图内容容器，该容器包装所有子视图

所以也许这是你的问题，你没有将flexGrow应用于scrollView，而是应用于它的包装