React Native ScrollView не будет расширяться с помощью дочернего размера

Question

Я создаю приложение, которое использует метод Map для создания нескольких различных компонентов. У меня есть прокрутка, которая содержит всю страницу. В настоящее время scrollView не будет расширяться, чтобы содержать все, несмотря на то, что, по-видимому, каждый совет можно найти в Интернете.

Я пытался, чтобы вид прокрутки находился внутри другого вида, но он все еще не работает так же, как комбинация различных гибких конфигураций. Кто-нибудь знает, почему эта страница в частности не работает. Я сравнил его с другими страницами, и, по-видимому, нет причин, по которым гибкость не расширяется.

Спасибо

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? do c говорит:

Эти стили будут применены к контейнеру содержимого представления прокрутки, который охватывает все дочерние представления

Так что, возможно, здесь ваша проблема, вы не применяете flexGrow к scrollView, а к его оболочке