Reactjs React Native ScrollView不会随子大小展开

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

我已经尝试将scrollview放在另一个视图中，但这仍然不能像组合不同的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>
    );
}}

---

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

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

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

---

因此，也许这就是您的问题所在，您没有将flexGrow应用于scrollView，而是应用于它的包装器

可能只是使用样式而不是contentContainerStyle？医生说：

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

---

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

，这是一个非常好的建议，我认为它会起作用，但是，它仍然不起作用，这令人失望，我发现，样式中有高度，包括百分比，出于某种原因，它打破了ScrollView，这是一个非常好的建议，我认为它会起作用，但是，它仍然不起作用，令人失望的是，我发现，样式中有高度，包括百分比，由于某种原因，它破坏了ScrollView。你能在snack.expo.io中复制吗？有没有办法将整个文件夹上传到snack？我刚试过，但我的文件有这么多的集成部分，不管怎么说，我想出来了。我用百分比来改变许多项目的高度。当页面中添加了项目时，样式未处于状态，因此未更新。能否在snack.expo.io中复制？是否有方法将整个文件夹上载到snack？我刚试过，但我的文件有这么多的集成部分，不管怎么说，我想出来了。我用百分比来改变许多项目的高度。当页面添加了项目时，样式未处于状态，因此不会更新。

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%',
    },
});