React Native (flexDirection： "row" ) 不起作用

Question

由于某种原因，当我试图对齐卡片的内容时，这是图像和卡片。标题会像列一样对齐，两者不会挨着。

但是，如果我把flexDirection: "row"在模态容器(包含这两张卡片)中，它将卡片并排放置。为什么它对卡片本身的内容不起作用呢?

感谢

<Provider>
<Portal>
<Modal Modal visible={themeVisible} onDismiss={hideThemeModal} contentContainerStyle={modalStyle}>
<Card containerStyle={{ backgroundColor: '#3D3D3D', margin: 0, padding: 0, borderWidth: 0, elevation: 0, borderColor: '#212121' }}>
<Card.Title style={{ color: '#FFFFFF', marginBottom: 0, fontSize: 25, marginTop: 10 }} >Theme Selection</Card.Title>
<Text style={{ color: '#AAAAAA', textAlign: 'center', marginBottom: 10 }} >Thanks for supporting Fitness!</Text>
</Card>
<TouchableOpacity onPress={hideThemeModal}>
<Card containerStyle={{ flexDirection: "row", backgroundColor: '#3D3D3D', marginTop: 10, paddingBottom: 30, padding: 30, borderWidth: 0, borderTopWidth: 1, borderBottomWidth: 1, elevation: 0, borderColor: '#212121' }}>
<Image style={{ width: 25, height: 25 }} source={require('./assets/yellow-dark.png')} />
<Card.Title style={{ color: '#FFFFFF' }} >Yellow / Dark</Card.Title>
</Card>
</TouchableOpacity>
</Modal>
</Portal>
</Provider>

尝试浮动:左，flexdirection, inline-block等没有改变

下面是modalStyle和safeareaview的样式

const modalStyle = {
backgroundColor: '#3D3D3D',
padding: 20,
margin: 35,
borderWidth: 1,
borderRadius: 7.5,
borderColor: '#F3AF21',
};

const styles = StyleSheet.create({
container: {
display: "flex",
flex: 1,
backgroundColor: '#181818',
},
});

Answer 1

Card组件有2个用于样式的道具。containerStyle用于外箱造型，wrapperStyle用于内箱造型。在你的代码中，你应该将containerStyle替换为wrapperStyle

<Card wrapperStyle={{ flexDirection: "row", backgroundColor: '#3D3D3D', marginTop: 10, paddingBottom: 30, padding: 30, borderWidth: 0, borderTopWidth: 1, borderBottomWidth: 1, elevation: 0, borderColor: '#212121' }}>
<Image style={{ width: 25, height: 25 }} source={require('./assets/yellow-dark.png')} />
<Card.Title style={{ color: '#FFFFFF' }} >Yellow / Dark</Card.Title>
</Card>

注意:你可以根据需要调整这两个样式中的其他属性。