问响应本机样式组件Flatlist未显示
EN

Stack Overflow用户

提问于 2021-12-26 18:31:09

回答 1查看 163关注 0票数 1

我使用为移动应用程序创建一个列表，但是我的平板列表并没有显示来自renderItem道具中的项目的任何返回。它看起来确实会返回，因为它有时会显示ItemSeparator内容，但这些项并不是真正呈现出来的。

这一页：

import { Container, 
                 Text, 
                 FloatingButton, 
                 List, 
                 ListItem, 
                 ListSeparator, 
                 View } from "../../Styles/index";

import Mapa from '../../Assets/mapa'
import Adicionar from '../../Assets/add_icon'

export default () => {
    
    item = {
        id: 1454532454335,
        Local: "Pedra da galinha choca",
        Regiao: "Quixadá",
        Data: "08/12/2021",
        Hora: "15:00"
    }
    item2 = {
        id: 12131234213,
        Local: "Pedra da galinha choca",
        Regiao: "Quixadá",
        Data: "08/12/2021",
        Hora: "15:00"
    }

    registros = [item, item2]

    const EmptyListMessage = () => {
        return (
            // Quando a lista estiver vazia
            <Container>
                {/* Image + text */}
                <Mapa width="64" height="64" fill="#FFFFFF" />
                <Text padding="20">Não há nenhum registro cadastrado!</Text>
            </Container>
        );
    };

    const ItemSeparatorView = () => {
    return (
      // Flat List Item Separator
      <ListSeparator/>
    );
  };

    const ItemView = ({Local, Regiao, Data, Hora}) => {
        console.log(Data)
    return (
      // Flat List Item
            <View
                style={{
                    flex: 1,
                    flexDirection: "row",
                    backgroundColor: "#000000"
                }}
            >
                <Container flex={3}>
                    <Text size="small" weight="bold" align="left">{Local}</Text>
                    <Text size="small" align="left">{Regiao}</Text>
                </Container>
                <Container>
                    <Text size="small" align='left'>{Data}</Text>
                    <Text size="small" align='left'>{Hora}</Text>
                </Container>
            </View>
    );
  };

    const renderItem = ({item}) => (
        <ItemView 
            Local={item.Local} 
            Regiao={item.Regiao} 
            Data={item.Data} 
            Hora={item.Hora}
        />
    )

    return (
        <Container color="bg">
            <List
                data={registros}
                keyExtractor={item => item.id}
                ItemSeparatorComponent={ItemSeparatorView}
                renderItem={(item) => renderItem(item)}
                ListEmptyComponent={EmptyListMessage}
            />

            <FloatingButton>
                <Adicionar width="48" height="48" />
            </FloatingButton>
        </Container>
    )
}

还有造型，fyi：

export const Container = styled.View`
    flex: ${(props) => props.flex || '1'};
    width: 100%;
    background: ${(props) => props.color ? theme.colors[props.color] : 'transparent'};
    flex-direction: ${(props) => (props.direction ? 'row' : 'column')};
    justify-content: ${(props) => (props.justify || 'center')};
    padding: ${(props) => props.padding || 0}px;
    padding-top: ${(props) => props.paddingtop || 0}px;
    padding-bottom: ${(props) => props.paddingbottom || 0}px;
    padding-right: ${(props) => props.paddingright || 0}px;
    padding-left: ${(props) => props.paddingleft || 0}px;
    align-items: ${(props) => props.align || 'center'};
    max-width: ${(props) => props.width || '100%'};
    max-height: ${(props) => (props.height ? props.height + 'px' : 'auto')};
    position: ${(props) => props.position || 'relative'};
    top: ${(props) => props.zIndex || 1}px;
`;

export const Text = styled.Text`
    font-size: ${props => props.size ? '17px' : '22px'};
    font-weight: ${props => props.weight ? 'bold' : 'normal'};
    text-align: ${props => props.align || 'center'};
    padding: ${(props) => props.padding || 0}px;
    flex: 1;
    width: 100%;
`;

export const List = styled.FlatList`
    flex: 1;
    padding: 20px;
`;

export const ListItem = styled.TouchableOpacity`
    flex: 1;
    width: 100%;
    flex-direction: row;
    padding-top: 20px;
    padding-bottom: 20px;
`;

export const ListSeparator = styled.View`
    height: 2px;
    width: 100%;
    background: #B4A982;
`;

export const View = styled.View``;

export const FloatingButton = styled.TouchableOpacity`
    position: absolute;
    bottom: 30px;
    right: 20px;
    border-radius: 50px;
`;`

react-native

styled-components

回答 1

Stack Overflow用户

发布于 2022-09-18 23:50:25

据我所知，您没有在renderItem上使用正确的函数结构；这应该有效，请注意{} work项：

<List
   data={registros}
   keyExtractor={item => item.id}
   ItemSeparatorComponent={ItemSeparatorView}
   renderItem={({item}) => renderItem(item)}
   ListEmptyComponent={EmptyListMessage}
/>

我不认为您使用的是类型记录，但如果使用，则应该在样式文件中指定每个项目的泛型类型。

interface GenericType{
    id: number,
    Local: string,
    Regiao: string,
    Data: string,
    Hora: string
};
export const List = styled.FlatList<GenericType>`
    flex: 1;
    padding: 20px;
`;

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70488900

复制

相似问题

问响应本机样式组件Flatlist未显示
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应本机样式组件Flatlist未显示EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应本机样式组件Flatlist未显示
EN