【问题标题】:Image URIs with Typescript and React Native带有 Typescript 和 React Native 的图像 URI
【发布时间】:2018-03-27 14:07:43
【问题描述】:

我现在有一个非常简单的应用程序,我将其用作游乐场,只是在代码中玩耍,看看它是如何工作的。

我正在使用tsc 将我的.tsx 文件编译到artifacts 文件夹中,该文件夹用作compile/gradle.build 的入口点。

但是,我现在正在尝试包含横幅图像并且遇到了问题。我知道目前我的tsc 不会对图像做任何事情,即使我导入它们,例如import * as brandImage from '../app/assets/brand.png'

此时我意识到仅tsc 可能不足以构建一个步骤。如果我不使用typescriptreact-native 会简单地将我需要的图像移动到我可以引用的构建文件夹中吗?

我有点迷失在这里。我假设我需要改用 babel 之类的东西将文件移动到 buildassets 文件夹中,我可以在 .tsx 文件中引用这些文件夹。

react-native 中工作对于我将用于构建 React Web 应用程序的标准资产是否意味着什么?或者我是否需要有我通常会使用的类似构建步骤。

【问题讨论】:

  • 构建过程的其余部分是什么样的?你是在使用 Webpack 还是类似的东西,还是直接打电话给tsc? Typescript 或没有 Typescript,您绝对正确,您需要另一个构建步骤来 1) 适当地解析图像文件的导入,以及 2) 将图像放入构建的代码中。
  • 嗨@err1100,你是对的,我只是运行rimraf build,然后运行tsc。你会推荐什么?我了解我的主要选择是 a) 自己使用节点包移动文件并将其定义在 json 的脚本区域中,b) webpack 或 c) babel?
  • 不完全。 Babel 是一种将现代 Javascript 转换为在更多地方运行的不太现代的 Javascript 的工具。 Webpack 是一种用于编排构建过程各个部分的工具——Babel 通常就是其中之一。无论如何,请参阅我的答案了解更多信息。

标签: typescript react-native


【解决方案1】:

由于您有一个 React Native 项目,因此故事与 Web 的故事略有不同。为了让 React Native 项目在你的手机上运行,​​你最终必须直接与 iOS/Android 交互才能让你的代码运行,所以通常不建议你自己构建过程。幸运的是,有很多入门项目允许您将 Typescript 与 React Native 结合使用。我强烈建议您检查它们,而不是自己重写整个原生构建过程:

您也可以使用react-native-cli 创建一个新的 RN 应用,然后自己添加 Typescript 支持:

【讨论】:

  • 啊,谢谢。我遇到的主要问题是静态资源。目前,我的 URI 导入路径必须指向我想要包含的文件,就好像它在构建文件夹中一样,而不是相对的。我猜这是 webpack 通常在 web 中处理的事情,但在 react-native 中它有点复杂。我在我想要相对指向的文件夹的根目录中看到了一个使用package.json 文件的解决方案,但我无法使其正常运行。对静态资源有什么建议吗?
  • RN 有一些关于图像的文档,可能会有帮助:facebook.github.io/react-native/docs/images.html
猜你喜欢
  • 2017-03-04
  • 1970-01-01
  • 1970-01-01
  • 2021-11-22
  • 1970-01-01
  • 2022-11-07
  • 2019-09-27
  • 1970-01-01
  • 2020-05-03
相关资源
最近更新 更多