NativeScript使用nativescript-floatingactionbutton插件报错：无法读取'FloatingActionButton'属性

Hey there! Let's walk through fixing that main thread crash you're seeing when trying to use the floating action button plugin. Since you're new to NativeScript without Angular, these are the most common issues to check:

1. Double-Check Plugin Installation #

First, make sure you installed the plugin correctly using NativeScript's official plugin command (direct GitHub installs can sometimes miss critical setup steps):

ns plugin add nativescript-floatingactionbutton

Then clean your project to clear cached build files and sync dependencies properly:

ns clean && ns prepare

2. Add the Required XML Namespace #

This is the #1 mistake new users make! Your <FAB:fab> tag won't be recognized unless you declare the plugin's namespace in your root Page element. Update your XML file to include this:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
      xmlns:FAB="nativescript-floatingactionbutton"
      loaded="{{ pageLoaded }}">

The xmlns:FAB attribute tells NativeScript exactly where to find the FAB component code.

3. Verify Your Icon Resource Exists #

The crash could be triggered if the res://ic_add_white icon doesn't exist in your project's resource folders:

• For Android: Place the icon file in App_Resources/Android/drawable-* folders (match density buckets like drawable-mdpi, drawable-hdpi for proper scaling).
• For iOS: Add the icon to App_Resources/iOS/Assets.xcassets.

If you don't have a custom icon ready, test with a system default instead to rule out resource issues:

<FAB:fab class="fab-button" icon="res://ic_add" tap="{{ onTap }}" rippleColor="#f1f1f1"/>

4. Ensure the Tap Binding is Defined #

Your tap="{{ onTap }}" binding expects a method named onTap to exist in your code-behind file. Add this to your corresponding .js file:

function onTap(args) {
    console.log("FAB tapped!");
    // Add your custom action logic here
}
exports.onTap = onTap;

// Also set up the binding context to link your functions to the page
function pageLoaded(args) {
    const page = args.object;
    page.bindingContext = {};
}
exports.pageLoaded = pageLoaded;

5. Test with a Minimal Working Example #

If you're still crashing, start fresh with this stripped-down code to isolate the issue:

main-page.xml #

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
      xmlns:FAB="nativescript-floatingactionbutton"
      loaded="{{ pageLoaded }}">
    <StackLayout class="p-20">
        <Label text="Test FAB" class="h2 text-center"/>
        <FAB:fab class="fab-button" icon="res://ic_add" tap="{{ onTap }}" rippleColor="#f1f1f1"/>
    </StackLayout>
</Page>

main-page.js #

function pageLoaded(args) {
    const page = args.object;
    page.bindingContext = {};
}
exports.pageLoaded = pageLoaded;

function onTap(args) {
    console.log("FAB works!");
}
exports.onTap = onTap;

Run ns run android or ns run ios after setting this up—this should eliminate any unrelated code causing the crash. If you still get an error, share the full stack trace from your console, and we can dig deeper!

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