React Native 中的 SCSS 文件 - 导入和使用

Question

我是 React Native 的新手，我想在我的 React Native 应用程序中实现一个浮动按钮，就像这里的那个：https://bit.dev/khaledebdelli/components/fancy-floaty-button

我尝试使用 npm 从终端导入按钮的包，但它说该文件不存在，所以我保存了项目目录中提供的 scss 文件。

为了在 React Native 中使用 scss 文件，我完全按照此链接中的说明进行操作：https://github.com/kristerkari/react-native-sass-transformer。

但是，浮动按钮没有出现在我的应用程序中。这是我尝试在代码中执行的操作：

BackButton.js 内部：

import 'react-native-gesture-handler';
import * as React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';
{/* CSS file imported in below line of code */}
import styles from './styling/floatButton.scss'

export default function BackButton(props) {
    const navigation = useNavigation();
    console.log(props.title)
    return (
        <TouchableOpacity
            style={styles.btn}
            onPress={() => navigation.navigate(props.to, props.toTransfer)}
        >
            <Text>
                {props.title}
            </Text>
        </TouchableOpacity>
    );
}

在 hash-tables.js 中我导入了 BackButton.js 并渲染了 BackButton 组件：

import 'react-native-gesture-handler';
import * as React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import BackButton from '../Components/BackButton';

{*/Below line of code is inside the render function of a class component/*}
    <BackButton title='Previous' to='Topics' />

这是我在应用中看到的，而不是浮动按钮：

如果有人能指出我可能出错的地方，将不胜感激:)

Answer 1

我猜你没有正确安装 sass，我通常只是在前端做：“npm install node-sass”并且每次都可以工作:)