Nativescript复合组件

Question

Criei um component com estilo .SCSS por eelenãoaplica o estilo。准定性规范.css或目的权？

_{（英语翻译）}我创建了一个具有.SCSS样式的组件，但是它不应用该样式。需要专门的样式文件.css吗？

{
  ...,
  "devDependencies": {
    "css-loader": "^3.4.2",
    "nativescript-dev-webpack": "~1.5.1",
    "node-sass": "^4.13.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.5.3",
    "webpack": "^4.42.1"
  },
  ...
}

.container-search {
  margin: 8;
  padding: 0 5;
  border-radius: 30;     
  background-color: white;

  textField {
    border-width: 1;
    border-color: transparent;
    font-size: 14;
    margin: 0;
    color: #333;
  }
  button {
    width: 35;
    height: 35;
    padding: 0;
    margin: 0;
    color: #999;
    border-radius: 100%;
    background-color: #fff;
    font-size: 16;
    font-weight: 700;
  }
}

<StackLayout class="container-search" loaded="onLoaded">
  <GridLayout rows="auto" columns="auto,*,auto" >
    <Button row="0" col="0" id="searchButton" text="&#xf002;" class="las" tap="{{ onSearchSubmit }}" />
    <TextField row="0" col="1" id="searchField" hint="Pesquise.." autocorrect="false" returnKeyType="search" returnPress="{{ onSearchSubmit }}" />
    <Button row="0" col="2" id="searchClear" text="&#xf00d;" class="las" tap="{{ onSearchClear }}" visibility="hidden" />
  </GridLayout>
</StackLayout>

import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout/stack-layout";
import { TextField } from "tns-core-modules/ui/text-field/text-field";
import { Button } from "tns-core-modules/ui/button/button";
import { Internationalization } from "~/pages/@shared/utilities/internationalization";
export class SearchBar {

  public static shared: SearchBar;

  private static searchField: TextField;
  private static searchButton: Button;
  private static searchClear: Button;

  public static onLoaded(args: any) {

    const innerComponent = args.object as StackLayout;
    const bindingContext = {...innerComponent.bindingContext};

    SearchBar.searchField = innerComponent.getViewById("searchField") as TextField;
    SearchBar.searchButton = innerComponent.getViewById("searchButton") as Button;
    SearchBar.searchClear = innerComponent.getViewById("searchClear") as Button;

    SearchBar.searchField.on("textChange", SearchBar.onTextChangeST); 

    bindingContext.internationalization = Internationalization.singleton().getData();
    bindingContext.onSearchSubmit = SearchBar.onSearchSubmit;
    bindingContext.onSearchClear = SearchBar.onSearchClear;
    innerComponent.bindingContext = bindingContext;   

    SearchBar.shared = SearchBar;
  }

  public static get onSearchSubmit(): (args: any) => void {
    return SearchBar.onSearchSubmitST;
  }

  public static get onSearchClear(): (args: any) => void {
    return SearchBar.onSearchClearST;
  }

  // Auxiliaries Methods

  private static onTextChangeST(args: any) {

    const text = SearchBar.searchField.text;
    const bindingContext = args.object.page.bindingContext;

    if(text != ""){
      SearchBar.searchClear.visibility = "visible";
    } else {
      SearchBar.searchClear.visibility = "collapse";
      bindingContext.search("");
    }
  }

  private static onSearchSubmitST(args: any) {

    const text = SearchBar.searchField.text;
    const bindingContext = args.object.page.bindingContext;

    if(args.object.id == "searchButton") {

      setTimeout(() => {
        SearchBar.searchField.dismissSoftInput();
      }, 100);
    }    

    const result = bindingContext.search(text);

    if(result == 0) { ()=>{} }
  }

  private static onSearchClearST(args: any) {

    const bindingContext = args.object.page.bindingContext;

    SearchBar.searchField.text = "";
    bindingContext.searchClear();    
  }

}

export const onLoaded = SearchBar.onLoaded;

Answer 1

没有必要。css，我认为您需要在webpack中包含文件，这是一个链接，向您展示一个示例：How to inciude a local html file in a webview in nativescript main-page.js?

第二个选项是：如果未完成，则通过tns迁移将项目迁移到最新版本。

第三选项：您需要使用以下命令编译.scss文件：npm install --save-dev节点-sass sass-loader我让你这个链接：https://www.tjvantoll.com/2019/08/30/nativescript-sass/

如果您没有看到此内容，可以尝试此链接https://www.tjvantoll.com/2019/08/30/nativescript-sass/