Javascript 如何并排呈现两个项目

假设我有

组件在

。 我想要的是在容器类上并排呈现这些

以下是我迄今为止所尝试的：

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;

const ListingCard=（道具）=>{
返回(
这是ListingCard组件
);
};
const styles=StyleSheet.create({
容器：{
//弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
身高：150，
宽度：尺寸。获取（“窗口”）。宽度/2-6，
背景颜色：colors.WHITE，
边界半径：5，
marginHorizontal:10，
marginBottom:10
},
});
导出默认列表卡；

下面是我如何使用

：

  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'
    }
});

render（）{
const{currentCategory}=this.state；
返回(
这个.\u drawer=ref}
type=“静态”
onOpenStart={（）=>{
这是我的国家({
是的，
})
}}
onClose={（）=>{
这是我的国家({
isDrawerOpen:错误，
})
}}
内容={}
tapToClose={true}
边={'right'}
OpenDrawerofset={0.2}//20%的抽屉右侧间隙
panCloseMask={0.2}
closeddrawrofset={-3}
>
this.handleFilterPress（）}
headerText={currentCategory&¤tCategory.categoryName}
isIconVisible={true}
rightButtonText={'Filtrele'}
onIconPress={（）=>this.handleBackPress（）}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
//对齐项目：“居中”，
//为内容辩护：“中心”，
背景颜色：colors.GENERAL\u BCK，
//水平方向：5
},
卡片容器：{
flexDirection:'行'，
flexWrap:“wrap”
}
});

我尝试过的是，有或没有

容器，但这一点都没有帮助。我之所以不能适应它，是因为我对ReactNative比较陌生，并且一直在为这些样式而挣扎。 我无法同时渲染那些

。谢谢您的帮助。

好的，我已经修好了

问题是

的宽度

它是：

width:Dimensions.get（'window'）.width/2-6，

，太宽了，无法将其中两个放在同一行上。所以我把它改为：

width:Dimensions.get（'window'）.width/2-20，

瞧！成功了