reactjs 无法从react-native-elements呈现卡片

ijnw1ujt  于 2023-02-15  发布在  React
关注(0)|答案(2)|浏览(104)

我只是尝试从react-native-elements UI库中渲染一张卡片。下面是我一直在浏览并复制粘贴的文档:https://reactnativeelements.com/docs/1.2.0/card
下面是我的Deal组件:

import { View } from 'react-native'
import { Card, ListItem } from 'react-native-elements'

const Deal = () => {
    const users = [
        {
            name: 'brynn',
            avatar: 'https://www.w3schools.com/howto/img_avatar2.png',
        },
    ]
    return (
        <View>
            <Card containerStyle={{ padding: 0 }}>
                {users.map((u, i) => {
                    return (
                        <ListItem
                            key={i}
                            roundAvatar
                            title={u.name}
                            leftAvatar={{ source: { uri: u.avatar } }}
                        />
                    )
                })}
            </Card>
        </View>
    )
}

export default Deal

下面是我的SecondScreen组件,我尝试在其中呈现Deal

import { StyleSheet, Text, View } from 'react-native'
import Step from '../components/Step'
import MyCarousel from '../components/MyCarousel'
import Ratings from '../components/Ratings'
import Deal from '../components/Deal'

export default function SecondScreen({ route, navigation }) {
    const { image } = route.params

    return (
        <>
            <View>
                <Text
                    style={{ fontSize: '16px', marginLeft: 10, marginTop: 15 }}
                >
                    Daily Deals
                </Text>
                <View
                    style={{
                        borderBottomColor: 'black',
                        borderBottomWidth: StyleSheet.hairlineWidth,
                    }}
                />
                <View style={{ marginTop: 10 }}>
                    <Deal />
                </View>
            </View>
        </>
    )
}

下面是它在最后呈现的内容:

任何帮助将不胜感激!

2mbi3lxu

2mbi3lxu1#

尝试为<View />添加flexheight

<View style={{ flex: 1, marginTop: 10 }}>
    <Deal />
</View>
olmpazwi

olmpazwi2#

Deal组件中,您有一个<View /> Package 器来 Package <Card />组件。 Package 器位于Deal文件中,而不是 Package 在SecondScreen文件中。
您是否尝试过删除多余的<View />
如果希望保留该<View />,是否尝试过为该特定<View />赋予style={{ height: 100px }}style={{ flex: 1 }}属性?

相关问题