React Native中Card组件内flexDirection: "row"不生效问题求助

核心原因 #

1. React Native 不存在 float、inline-block 这类Web CSS属性，这些设置完全无效。
2. 你使用的Card组件（推测是react-native-elements组件）内部自带默认布局结构：Card.Title会被渲染为独占一行的容器，且Card内部内容区域默认是flexDirection: column，直接给Card的containerStyle设置flexDirection: row无法覆盖内部子组件的布局规则。

解决方案 #

放弃直接使用Card.Title，改用自定义文本组件，并用View包裹Image和文本，手动控制横向布局：

修改后的代码示例：

<Provider>
  <Portal>
    <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={{ backgroundColor: '#3D3D3D', marginTop: 10, paddingBottom: 30, padding: 30, borderWidth: 0, borderTopWidth: 1, borderBottomWidth: 1, elevation: 0, borderColor: '#212121' }}>
          {/* 用View包裹实现横向排列 */}
          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
            <Image style={{ width: 25, height: 25 }} source={require('./assets/yellow-dark.png')} />
            {/* 用Text代替Card.Title，自定义样式 */}
            <Text style={{ color: '#FFFFFF', fontSize: 18, fontWeight: 'bold' }}>Yellow / Dark</Text>
          </View>
        </Card>
      </TouchableOpacity>

    </Modal>
  </Portal>
</Provider>

补充说明 #

• 如果一定要使用Card.Title，可查看组件文档确认是否有修改内部布局的属性，但自定义文本配合View的方式通常更灵活。
• 所有布局设置请使用React Native支持的FlexBox属性，比如flexDirection、alignItems、justifyContent等，不要使用Web专属CSS属性。

内容的提问来源于stack exchange，提问作者Hypo