【问题标题】:How can I use javascript library such as moment.js in react native如何在本机反应中使用诸如 moment.js 之类的 javascript 库
【发布时间】:2015-05-31 11:53:42
【问题描述】:

在 react native 中使用原生 javascript 库的推荐方法是什么?有什么具体的限制吗?

【问题讨论】:

    标签: react-native


    【解决方案1】:

    简单易懂!从项目的根目录运行:

    npm install moment --save
    

    然后你可以在你的代码中导入它:

    import moment from 'moment';
    var now = moment().format();
    

    限制将是任何试图“接触”浏览器的东西(在此上下文中不存在)。这就是 XHR 之类的 polyfill 的原因。

    official documentation 有关于如何使用矩库的示例

    【讨论】:

    • 这看起来并不实际。与 lodash 相同。有些东西有效,例如通量包,有些则无效。
    • 我已经尝试过了,它确实有效。具体问题是什么?
    • 你试过其他的吗,比如lodash?它对我都不起作用。从require('lodash') 导出的模块是一个空对象。我也尝试过“lodash-node”。
    • 看起来其他人也在报告同样的事情:github.com/facebook/react-native/issues/406
    • 只是我在 loadash 问题上的 2 美分,而且我是菜鸟,所以不要相信我的话,但在 React Native 中,一些库需要依赖于操作系统的代码,即在 xcode 或 android 中。我对此了解的还不够多,无法进一步评论。另一个想法是 Import 语句默认在 node_modules 文件夹中查找,而与 package.json 无关。您的导入语句也可能是错误的。您也可以尝试变体: import { func } from 'lib' 或 import * from 'lib'
    【解决方案2】:

    一些即时方法在 React Native 中有效,而另一些则无效。我怀疑这与听众有关。

    我可以使用 moment 进行格式化:

    moment(new Date()).format("YYYY-MM-DD hh:mm:ss")
    

    但不适用于主动格式化:

    moment(new Date()).format("YYYY-MM-DD hh:mm:ss").fromNow()
    

    【讨论】:

      【解决方案3】:

      要使用 npm 库,只需将此命令与相应的库名称一起使用

      npm install moment --save
      

      eg.) npm install {your library name here} --save

      然后在你的类中导入并使用

      import moment from 'moment';
      

      【讨论】:

        【解决方案4】:

        如果你特别想在 react 或 react native 中使用 moment.js,请查看 react-moment,这是一个用于 moment 库的 react 组件,位于 https://github.com/headzoo/react-moment

        要在 react native 中使用 react-moment,运行:

        npm install --save moment react-moment
        

        然后在你要使用moment的文件中:

        import Moment from 'react-moment';
        

        最后,随意使用,例如:

        <Moment element={Text} fromNow>
            { post.datePublished }
        </Moment>
        

        prop element={Text} 专门用于 React Native。它确保生成的字符串在Text 组件中呈现。没有这个,react native 会报错。

        【讨论】:

        • element={Text} 这个东西解决了我的错误。谢谢!!
        【解决方案5】:

        目前看来,一些npm modules are not compatible with the packager。还没有真正深入研究为什么,但我一直在做的是拥有一个供应商文件夹并复制网络版本,但在顶部专门放置

        /** * @providesModule moment */

        并在底部将其更改为:

        module.exports = moment;

        不确定这是否正确,但包装对每个人来说还是很新的。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2021-08-16
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2021-12-29
          • 1970-01-01
          相关资源
          最近更新 更多