如何在React-Native中将视图与组件分离

Question

我是本机的新手，该组件看起来非常混乱，它具有视图，控制器并在一个文件中设置所有样式。

我想将这些内容组织在一个单独的文件中，例如在单独的文件中编写视图（UI设计）并在单独的文件中设置样式，并希望导入到组件中（我们如何在Angular项目中做到这一点）

喜欢

更新

@Component({
  selector: 'app-outcome-ratio-popup',
  templateUrl: './outcome-ratio-popup.component.html',
  styleUrls: ['./outcome-ratio-popup.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class OutcomeRatioPopupComponent implements OnInit {
//i write logics  here
}

in result-ratio-popup.component.html

<div>hello world <div>  //i write view design code here

outcome-ratio-popup.component.scss

ul{
      li{
          margin-top: 10px;  //i Write styles here
      }
  }

Answer 1

这是我目前为我的项目所遵循的。 在根目录中，您可以拥有文件夹“ app”，该文件夹具有以下结构

已编辑

假设您具有组件名称Header

标题

• Index.js（您可以在此处纠正组件应用程序逻辑）
• Style.js（组件的样式）
• View.js（您的组件的视图）

我个人不会推荐上述布局。

---

您可以使用以下内容 赫德

• Index.js（您可以纠正组件应用程序逻辑并在此处查看）
• Style.js（组件的样式）

在大多数情况下，我们不会将视图和逻辑保留在单独的文件中，因为组件文件将包含很少的逻辑。如果组件非常大，则可以尝试将组件分解为小组件。这样会使您的组件杂乱无章。

如果您可以看一下this项目，您将理解我在说什么