如何在NativeBase中修改Android单选框选中图标为勾选图标

Got it, let's get that radio button's selected icon swapped out for a checkmark in your NativeBase Material theme setup. The default implementation uses NativeBase's IconNB, but we can override that to use a custom icon (like the Material checkmark) instead. Here's your step-by-step fix:

1. Prepare Your Icon Library #

First, make sure you have a vector icon library installed (if you don't already). For Material icons, use react-native-vector-icons/MaterialIcons (or @expo/vector-icons/MaterialIcons if you're on Expo).

2. Modify the Radio Component Theme #

Open your ../native-base-theme/components/Radio.js file and update the theme configuration to use the checkmark icon instead of the default radio icon. We'll replace references to NativeBase.IconNB with your chosen icon component, and set the icon name to check.

Here's the updated Radio.js code:

import { Platform } from "react-native";
import variable from "./../variables/platform";
// Import your Material Icons component
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

export default (variables = variable) => {
  const radioTheme = {
    justifyContent: 'center',
    alignItems: 'center',
    fontSize: 30,
    lineHeight: 20,
    ".selected": {
      // Swap IconNB with MaterialIcons and use the checkmark icon
      "MaterialIcons": {
        name: 'check',
        fontSize: 28, // Adjust size to fit your design
        color: Platform.OS === "ios" ? variables.radioColor : variables.radioSelectedColorAndroid,
        lineHeight: Platform.OS === "ios" ? 20 : variables.radioBtnLineHeight,
        height: Platform.OS === "ios" ? 20 : undefined
      }
    },
    // Style the unselected state
    "MaterialIcons": {
      name: Platform.OS === "ios" ? '' : 'radio-button-unchecked',
      fontSize: Platform.OS === "ios" ? undefined : variables.radioBtnSize,
      color: Platform.OS === "ios" ? "transparent" : undefined,
      lineHeight: Platform.OS === "ios" ? undefined : variables.radioBtnLineHeight
    }
  };
  return radioTheme;
};

Key Changes Explained: #

• Replaced NativeBase.IconNB with MaterialIcons: Tells NativeBase to use the Material Icons component instead of the default icon set.
• name: 'check' for selected state: Renders the checkmark icon when the radio is selected.
• Unselected state adjustments: For Android, we keep the default empty radio icon; for iOS, we maintain transparency to match your original setup.
• Size tuning: Adjust fontSize in the selected state to make the checkmark fit perfectly within your radio button size.

3. Verify Theme Variables (Optional) #

Double-check your material.js theme variables to ensure colors and sizes align with your new icon:

// Radio Button
get radioColor() { return "#7ED321"; },
radioBtnSize: 35,
radioSelectedColorAndroid: "#7ED321",
radioBtnLineHeight: 20,

These values work well with the updated icon, but feel free to tweak radioBtnSize or the fontSize in Radio.js if the checkmark doesn't fit as expected.

4. Test the Changes #

Rebuild your React Native project (clear cache if needed) and test the radio buttons. You should now see a checkmark instead of the default filled circle when a radio option is selected!

内容的提问来源于stack exchange，提问作者Tufan Çağkan Sökmenn