[英]How to render two items side by side ReactNative
Lets say i have <ListingCard/>
components inside of a <ScrollView/>
.假设我在
<ScrollView/>
中有<ListingCard/>
组件。 What i want is render those <ListingCard/>
side by side on a container class.我想要的是在容器 class 上并排渲染这些
<ListingCard/>
。
Here is What i have tried so far:这是我到目前为止所尝试的:
<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;
here is how i used <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'
}
});
What i have tried is, with or without <View>
container but this isnt helped at all.我尝试过的是,有或没有
<View>
容器,但这根本没有帮助。 The reason i could not accoplish it is i am relatively new on ReactNative and have struggle with those stylings.我无法完成它的原因是我在 ReactNative 上相对较新,并且对这些样式感到困惑。 I could not accomplish to render those
<ListingCard/>
side by side.我无法完成并排呈现这些
<ListingCard/>
。 Any help will be appreciated, thanks.任何帮助将不胜感激,谢谢。
Ok, i have fixed it.好的,我已经修好了。
Problem was <ListingCard/>
's width.问题是
<ListingCard/>
的宽度。
it was: width: Dimensions.get('window').width / 2 - 6,
which was too wide to fit two of them on same row.它是:
width: Dimensions.get('window').width / 2 - 6,
它太宽了,无法将它们中的两个放在同一行上。 so i changed it to: width: Dimensions.get('window').width / 2 - 20,
and voila.所以我将其更改为:
width: Dimensions.get('window').width / 2 - 20,
瞧。 it's worked.它的工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.