我只是尝试从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>
</>
)
}
下面是它在最后呈现的内容:
任何帮助将不胜感激!
2条答案
按热度按时间2mbi3lxu1#
尝试为
<View />
添加flex
或height
olmpazwi2#
在
Deal
组件中,您有一个<View />
Package 器来 Package<Card />
组件。 Package 器位于Deal
文件中,而不是 Package 在SecondScreen
文件中。您是否尝试过删除多余的
<View />
?如果希望保留该
<View />
,是否尝试过为该特定<View />
赋予style={{ height: 100px }}
或style={{ flex: 1 }}
属性?