React Native ScrollView不会随着子大小扩展

问题描述 投票:0回答:1

我正在构建一个使用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>
    );
}}
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%',
    },
});
reactjs react-native
1个回答
0
投票

也许只是使用样式而不是contentContainerStyle?医生说:

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

所以也许这是您的问题,您没有将flexGrow应用于scrollView而是将其应用于包装器

© www.soinside.com 2019 - 2024. All rights reserved.