javascript - 如何并排渲染两个项目 ReactNative
问题描述
可以说我<ListingCard/>
在 a 中有组件
<ScrollView/>
。我想要的是<ListingCard/>
在容器类上并排呈现这些。
这是我到目前为止所尝试的:
<ListingCard/>
const ListingCard = (props) => {
return (
<View style={styles.container}>
<Text>This is ListingCard Component</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
//flex: 1,
alignItems: 'center',
justifyContent: 'center',
height: 150,
width: Dimensions.get('window').width / 2 - 6,
backgroundColor: colors.WHITE,
borderRadius: 5,
marginHorizontal:10,
marginBottom: 10
},
});
export default ListingCard;
这是我的使用方式<ListingCard/>
:
render() {
const { currentCategory } = this.state;
return (
<Drawer
ref={(ref) => this._drawer = ref}
type="static"
onOpenStart={() => {
this.setState({
isDrawerOpen: true,
})
}}
onClose={() => {
this.setState({
isDrawerOpen: false,
})
}}
content={<SideFilterMenu />}
tapToClose={true}
side={'right'}
openDrawerOffset={0.2} // 20% gap on the right side of drawer
panCloseMask={0.2}
closedDrawerOffset={-3}
>
<View style={styles.container}>
<CustomHeader
onPress={() => this.handleFilterPress()}
headerText={currentCategory && currentCategory.categoryName}
isIconVisible={true}
rightButtonText={'Filtrele'}
onIconPress={() => this.handleBackPress()}
/>
<ScrollView
style={{flex:1}}
contentContainerStyle={styles.cardContainer}
>
<ListingCard />
<ListingCard />
<ListingCard />
<ListingCard />
<ListingCard />
<ListingCard />
<ListingCard />
<ListingCard />
</ScrollView>
</View>
</Drawer>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
//alignItems: 'center',
//justifyContent: 'center',
backgroundColor: colors.GENERAL_BCK,
//paddingHorizontal: 5
},
cardContainer: {
flexDirection: 'row',
flexWrap: 'wrap'
}
});
我尝试过的是,有或没有<View>
容器,但这根本没有帮助。我无法完成它的原因是我在 ReactNative 上相对较新,并且对这些样式感到困惑。我无法完成<ListingCard/>
并排渲染这些。任何帮助将不胜感激,谢谢。
解决方案
好的,我已经修好了。
问题是<ListingCard/>
的宽度。
它是:width: Dimensions.get('window').width / 2 - 6,
它太宽了,不能在同一行容纳两个。所以我把它改成了:width: Dimensions.get('window').width / 2 - 20,
瞧!它的工作。
推荐阅读
- php - 如何将标准选择和从 information_schema 中选择组合到单个查询中
- google-cloud-platform - GCP-LoadBalancer 更改不断恢复
- javascript - 总画布内存使用超过最大限制 (Safari 12)
- python - 我想要第 6 列 vlaues 的总和
- react-native - 如何在本机反应中使用 mapbox 标记集群?
- ios - Weex:网页在网页上显示正确,但在 iOS 设备上显示不正确
- javascript - 如何在咖啡脚本中将数组作为参数传递?
- .net - 为什么“功能体”会成为我的应用程序的瓶颈?
- python - 使用 urllib 将数据从 web-scraped JSON 添加到列表
- google-sheets - 在 Google 工作表中,如何获取包括日期在内的多个“位置”