如何并排渲染两个项目反应原生

Question

假设<ListingCard/>我在<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/>。任何帮助将不胜感激，谢谢。

Answer 1

好的，我已经修复了它。

问题是<ListingCard/>的宽度。

它是：width: Dimensions.get('window').width / 2 - 6,太宽了，无法在同一行中容纳两个。 所以我把它改成了：width: Dimensions.get('window').width / 2 - 20,，瞧！ 它奏效了。