需要反应原生的模块 [英] Requiring Modules in react-native

问题描述

我在反应本机项目中遇到了问题。我正在尝试执行一般要求文件，我导出所有模块。之后，我想只需要我的require.js文件，以避免在每个文件中需要（'../../ ModuleName'）这样的调用。

我有4个文件：

  index.ios.js 
 /app/home.js 
 /app/MyView.js 
 /app/require.js 
  

require.js：

  module.exports = {
 
 ：require（'./ home'），
 MyView：require（'。/ MyView'）
 
} 
  

（模块Home和MyView正确获取importet）

 'use strict'; 
 
 var React = require（'react-native'）; 
 var {
 AppRegistry，
 StyleSheet，
 Text，
 View，
} = React; 
 
 var {
 Home，
 MyView 
} = require（'。/ app / require'）; 
 
 class Test_require扩展React.Component {
 
 render（）{
 
 return（
< Home /> 
）; 
} 
 
} 
 
 
 
 AppRegistry.registerComponent（'Test_require'，（）=> Test_require）; 
  

Home.js（模块MyView没有获取导入）

 'use strict'; 
 
 var React = require（'react-native'）; 
 
 var {
查看，
文字
} =反应; 
 
 var {
 MyView 
} = require（'./ require'）; 
 
 class Home扩展React.Component {
 
 render（）{
 console.log（MyView）; 
返回（
< MyView /> 
）; 
} 
 
} 
 
 module.exports = Home; 
  

在Home.js中，MyView变量是未定义的。如果我想要一个模块中的模块，它已经被导入到另一个文件中，那么该变量是未定义的。

你们有什么线索我为什么能这样做还是有更好的解决方案来解决我的问题？感谢任何线索

解决方案

所以我发布自己的答案以防其他人遇到同样的问题。

在这样的语法中，所需的文件同步加载。因此，如果组件的构建比要求文件更快，则会出现此问题。要么在需要时使组件加载延迟，要么使用es6导入语法（异步导入加载）：

  import React from 'react-native'
  

欢呼！

I'm stuck on a problem in a react-native project. I'm trying to do a general require file, where I export all my modules. After that I would like to require only my "require.js" file to avoid calls like this require('../../ModuleName') in every file.

I have 4 files:

index.ios.js
/app/home.js
/app/MyView.js
/app/require.js

require.js:

module.exports = {

    Home: require('./home'),
    MyView: require('./MyView')

}

in index.ios.js (he modules Home and MyView are getting importet correctly)

'use strict';

var React = require('react-native');
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} = React;

var {
    Home,
    MyView
} = require('./app/require');

class Test_require extends React.Component {

    render() {

        return(
            <Home />
        );
    }

}



AppRegistry.registerComponent('Test_require', () => Test_require);

Home.js (the module MyView is not getting importet)

'use strict';

var React = require('react-native');

var {
    View,
    Text
} = React;

var {
    MyView
} = require('./require');

class Home extends React.Component {

    render() {
        console.log(MyView);
        return(
            <MyView />
        );
    }

}

module.exports = Home;

In the Home.js the MyView variable is "undefined". If I want to require a module in a Module, that gets already imported in another file, the variable is undefined.

Do you guys have any clue why I can do this or is there a better solution for my problem? Thanks for any clue

解决方案

So I'm posting my own answer in case someone else has the same problem.

In a syntax like this the required files are getting loaded synchronously. So if the component's build is faster than requiring files, this problem happens. Either make your components load lazy when you need them or use es6 import syntax like this (import loads asynchronously):

import React from 'react-native'

cheers!

这篇关于需要反应原生的模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！