React Native Elements CheckBox组件勾选后不显示勾选标记问题

我正在开发一个基于TypeScript的React Native项目，目前遇到react-native-elements库中CheckBox组件的异常问题：当复选框被勾选时，勾选标记无法正常显示。

以下是我的AndroidSelectableAppCard组件中CheckBox相关代码：

import { Image, Pressable, StyleSheet, Text } from 'react-native'
import { TiedSBlurView } from '../../design-system/components/TiedSBlurView'
import { T } from '../../design-system/theme'
import { CheckBox, Icon } from 'react-native-elements'
import { InstalledApp } from '../../../core/installed-app/InstalledApp'

export function AndroidSelectableAppCard({
  app,
  onPress,
  isSelected,
}: Readonly<{
  app: InstalledApp
  onPress: () => void
  isSelected: boolean
}>) {
  const dataImagePngBase64 = 'data:image/png;base64,'

  return (
    <Pressable onPress={onPress}>
      <TiedSBlurView style={styles.container}>
        <Image
          source={{
            uri: dataImagePngBase64 + app.icon,
          }}
          style={styles.appIcon}
        />
        <Text style={styles.appName}>{app.appName}</Text>
        <CheckBox
          style={styles.checkbox}
          containerStyle={styles.checkboxContainer}
          checked={isSelected}
          checkedColor={T.color.lightBlue}
          onPress={onPress}
        />
      </TiedSBlurView>
    </Pressable>
  )
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  checkbox: {
    alignItems: 'flex-end',
  },
  checkboxContainer: {
    padding: 0,
    margin: 0,
  },
  appName: {
    color: T.color.text,
    flexGrow: 1,
    alignItems: 'flex-end',
  },
  appIcon: {
    marginRight: T.spacing.small,
    height: 20,
    width: 20,
  },
})

已尝试以下解决方案但均未解决问题：

• 将react-native-elements库更新至最新版本
• 调整CheckBox组件样式
• 显式设置CheckBox组件的宽高
• 覆盖复选框图标的默认样式
• 修改勾选标记颜色

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