让我们说我在{
<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'
}
});
容器，但这完全没有帮助。我无法做到这一点的原因是我在ReactNative上相对较新，并且与那些样式有所挣扎。
我无法并排渲染那些<View>。任何帮助将不胜感激，谢谢。
答案 0 :(得分：0)
好的，我已经解决了。
问题是<ListingCard/>的宽度。
它是：width: Dimensions.get('window').width / 2 - 6,太宽，无法将其中两个放在同一行中。所以我将其更改为：width: Dimensions.get('window').width / 2 - 20,，瞧！它有效。