React native 如何在react native中将视图与组件分离

我对react native很陌生，组件看起来很凌乱，它的视图、控制器和样式都在一个文件中

我想在一个单独的文件中组织这些内容，比如在单独的文件中编写视图（UI设计），在单独的文件中创建样式，并希望导入到组件中（我们在角度项目中是如何做到的）

像这样

更新

@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
}

在output-ratio-popup.component.html中

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

---

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

编辑

假设您有组件名称标题

标题

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

我个人不会推荐上面的布局

---

您可以使用以下命令 海德尔

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

大多数情况下，在react native中，我们不会将视图和逻辑保存在单独的文件中，因为组件文件将包含很少的逻辑。若你们的组件很大，你们可以试着把它分解成小的组件。这将分离你的组件

---

如果您可以查看project，您将理解我想说的内容

可重用视图块可以添加到单独的块组件中，例如Profile，它保存Profile块，并使用参数作为用户数据调用每个块。样式您可以创建单独的js文件，并可以根据需要导入。看看这个漂亮的。这将有助于你理解整个文件夹结构。@A第三，你能给我举个例子吗？@A谢谢Rishikesh，您已将样式从组件中分离出来。您能告诉我如何将视图也从组件中分离出来吗？我已更新了我的问题，请检查。您可能会更好地理解。如果您没有，请随时提问。@Ankita检查您的onPress视图和视图逻辑，它应该类似于onPress={（）=>yourmethod}在登录时，只需像onPress={onPress from View}

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