Question

我想使用单位列表来维护图像的大小并构建具有动态高度的网格。但是，与您所想的不同，根据指定的大小输出图像的方式有所不同，但是在平面列表中网格的高度仅以恒定的高度输出。

结果图片是...

我想要的布局配置是一种动态高度配置，可以从图像中删除蓝色框。

我的来源

import React, {Component} from 'react';
import { Card, CardItem, Thumbnail, Container, Header, Content, Button, H1, Left, Right, Body, Title, Form, Item, Input, Label, Icon, Text, Spinner, } from 'native-base';
import { View, Alert, Image, ScrollView, Dimensions, StyleSheet, TouchableOpacity, TouchableWithoutFeedback, StatusBar,SafeAreaView, ImageBackground , TouchableHighlight,FlatList} from 'react-native';
import MainFooter from '../Components/MainFooter';
import MainHeader from '../Components/MainHeader';
import SideUserProfile from '../Components/Profile/userProfile';

const FooterProfile = () => (
    <View style = {styles.profile_box}>
        <Image style = {styles.profile_img} source = {{uri : 'https://k.kakaocdn.net/dn/bcz92L/btqIglgwRj9/lBJkgi3B8KsAokiv2K2fGk/img_640x640.jpg'}}/>
        <View style = {styles.profile_text_box}>
            <Text style = {styles.profile_memberclass} note>GOLDMEDALLIST</Text>
            <Text style = {styles.profile_name}>{'뚜뚜'}</Text>
        </View>
    </View>
)
class TimeLineScreen extends Component{
    constructor(props) {
        super(props);
        this.state = {
            data : [
                {
                    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
                    title: 'First Item',
                    image : 'https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68',
                    width : 236,
                },
                {
                    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
                    title: 'Second Item',
                    image : 'https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68',
                    width : 159,
                },
                {
                    id: '58694a0f-3da1-471f-bd96-145571e29d72',
                    title: 'Third Item',
                    image : 'https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68',
                    width : 165,
                },
                {
                    id: '5862394a0f-3da1-471f-bd96-145571e29d72',
                    title: 'Thsird Item',
                    image : 'https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68',
                    width : 120,
                }, {
                    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
                    title: 'First Item',
                    image : 'https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68',
                    width : 100,
                },
                {
                    id: '58694a0f-3da1-471f-bd96-145571e29d72',
                    title: 'Third Item',
                    image : 'https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68',
                    width : 165,
                },
                {
                    id: '5862394a0f-3da1-471f-bd96-145571e29d72',
                    title: 'Thsird Item',
                    image : 'https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68',
                    width : 120,
                }, {
                    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
                    title: 'First Item',
                    image : 'https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68',
                    width : 100,
                },

            ]
        }


    }

    renderItem({item}){
     console.log(item)
     return (
         <View style={[styles.item, { flexGrow : 50}]}>
             <Image style ={{height : item.width , width : 'auto', resizeMode : 'stretch',}} source ={ {uri : item.image} } />
             <FooterProfile/>
        </View>
     )
    }

    render(): React.ReactElement<any> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        return (
            <Container>
                <MainHeader {...this.props} on_ = {"Mission"} title = {"커뮤니티"} />
                <Content>
                    <View style ={{flex: 1, margin : 10}}>
                    <FlatList
                        style={styles.flatList}
                        data={this.state.data}
                        renderItem={(item) => this.renderItem(item)}
                        keyExtractor={item => item.id}
                        numColumns={2}
                    />
                    </View>
                </Content>
                <MainFooter on_={"Community"} {...this.props}/>
            </Container>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: StatusBar.currentHeight || 0,
    },
    item: {
        backgroundColor: '#f9c2ff',
        flexGrow : 0,
        margin : 5
    },
    title: {
        fontSize: 32,
    },
    flatList: {
        flex : 0,
    },
    profile_box : {
        margin : 10,
        flexDirection : 'row',
        alignItems: 'center',
    },
    profile_img :{
        borderRadius : 50, width : 30, height : 30,
        marginRight : 10,
    },
    profile_text_box :{
        marginTop : 10,
        alignItems : 'flex-start',
        justifyContent : 'center'
    },
    profile_memberclass : {
        fontFamily : 'NotoSansKR-Regular',
        fontSize : 10,
        color : '#39c191'
    },
    profile_name : {
        fontFamily : 'NotoSansKR-Bold',
        marginTop : -10,
        fontSize : 16,
    }
});

export default TimeLineScreen

如何获得所需的网格？我期待着您的回音。谢谢

Answer 1

Flatlist API的已知限制是不支持砌体布局。有许多可用的替代方法，例如react-native-masonry。

如何对本地Flatlist动态高度网格做出反应？

1 个答案: