React Native Elements CheckBox 组件不显示复选标记

Question

我目前正在使用 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 组件的高度和宽度。
• 覆盖复选框图标的默认样式。
• 更改复选标记的颜色。

Answer 1

我发现它可以按预期工作，但它不支持网页版本，因此出现此问题。尽管它“有效”。