react-native start 运行流程

在CMD下键入

C:\Node_JS\MyAwesomeProject>react-native start

运行流程:

C:\Users\Grart\AppData\Roaming\npm\react-native.cmd

C:\Users\Grart\AppData\Roaming\npm\node_modules\react-native-cli\index.js    

cli.run();

 

C:\Node_JS\MyAwesomeProject\node_modules\react-native\cli.js

module.exports = require('./local-cli/cli.js');

 

C:\Node_JS\MyAwesomeProject\node_modules\react-native\local-cli\cli.js

module.exports = {

  run: run,

  init: init,

};

 

 

 

C:\Node_JS\MyAwesomeProject\node_modules\react-native\private-cli\src\server\server.js

C:\Node_JS\MyAwesomeProject\node_modules\react-native\private-cli\src\server\runServer.js

function getAppMiddleware(args, config) {

    ………………………...

  return ReactPackager.middleware({

    nonPersistent: args.nonPersistent,

    projectRoots: args.projectRoots,

    blacklistRE: config.getBlacklistRE(),

    cacheVersion: '3',

    transformModulePath: transformerPath,

    assetRoots: args.assetRoots,

    assetExts: ['png', 'jpeg', 'jpg'],

    resetCache: args.resetCache || args['reset-cache'],

    polyfillModuleNames: [

      require.resolve(

        '../../../Libraries/JavaScriptAppEngine/polyfills/document.js'

      ),

    ],

    verbose: args.verbose,

  });

}

C:\Node_JS\MyAwesomeProject\node_modules\react-native\packager\react-packager\index.js

function createServer(options) {

  // the debug module is configured globally, we need to enable debugging

  // *before* requiring any packages that use `debug` for logging

  if (options.verbose) {

    enableDebug();

  }

 

  startSocketInterface();

  var Server = require('./src/Server');

  return new Server(omit(options, ['verbose']));

}

C:\Node_JS\MyAwesomeProject\node_modules\react-native\packager\react-packager\src\Server\index.js

function processRequest(req, res, next) {

…………

const building = this._bundles[optionsJson] || this.buildBundle(options);

 

    this._bundles[optionsJson] = building;

    building.then(……

)

…………

}

C:\Node_JS\MyAwesomeProject\node_modules\react-native\packager\react-packager\src\Bundler\index.js

function bundle(main, runModule, sourceMapUrl, isDev, platform) {

    const bundle = new Bundle(sourceMapUrl);

    const findEventId = Activity.startEvent('find dependencies');

    let transformEventId;

 

    return this.getDependencies(main, isDev, platform)

    .then(………………

    .………………..

}

 

function getDependencies(main, isDev, platform) {

    return this._resolver.getDependencies(main, { dev: isDev, platform });

  }

 

 

C:\Node_JS\MyAwesomeProject\node_modules\react-native\packager\react-packager\src\DependencyResolver\index.js

 

HasteDependencyResolver.prototype.getDependencies = function(main, options) {

  var opts = getDependenciesValidateOpts(options);

 

  return this._depGraph.getDependencies(main, opts.platform)

  .then(

    resolutionResponse => {

      this._getPolyfillDependencies(opts.dev).reverse().forEach(

        polyfill => resolutionResponse.prependDependency(polyfill)

      );

 

      return resolutionResponse.finalize();

    }

  );

};

C:\Node_JS\MyAwesomeProject\node_modules\react-native\packager\react-packager\src\DependencyResolver\DependencyGraph\index

 

  getDependencies(entryPath, platform) {

    console.log('call DependencyGraph entryPath='+entryPath);

    return this.load()

    .then(

      () => {

        platform = this._getRequestPlatform(entryPath, platform);

        const absPath = this._getAbsolutePath(entryPath);

        const req = new ResolutionRequest({

          platform,

          entryPath: absPath,

          deprecatedAssetMap: this._deprecatedAssetMap,

          hasteMap: this._hasteMap,

          helpers: this._helpers,

          moduleCache: this._moduleCache,

          fastfs: this._fastfs,

        });

 

        const response = new ResolutionResponse();

        console.log('call ResolutionRequest');

        return Promise.all([

          req.getOrderedDependencies(response),

          req.getAsyncDependencies(response),

        ]).then(() => response);

      }

    );

  }

C:\Node_JS\MyAwesomeProject\node_modules\react-native\packager\react-packager\src\DependencyResolver\DependencyGraph\ResolutionRequest.js

getOrderedDependencies(response) {….

resolveDependency(fromModule, toModuleName) {….

_resolveNodeDependency(fromModule, toModuleName) {….

_loadAsFile(potentialModulePath, fromModule, toModule) {….

  this._fastfs.fileExists(potentialModulePath)

 

转载于:https://www.cnblogs.com/Grart/p/5081656.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用 `react-native-svg` 和 `react-native-svg-transformer` 加载本地 SVG 图像,你可以按照以下步骤进行操作: 1. 首先,确保你已经在项目中安装了 `react-native-svg` 和 `react-native-svg-transformer` 依赖。你可以通过运行以下命令来安装它们: ``` npm install react-native-svg react-native-svg-transformer ``` 2. 在项目的根目录下创建一个名为 `metro.config.js` 的文件(如果已存在,请跳过此步骤)。 3. 在 `metro.config.js` 文件中添加以下内容: ```javascript module.exports = { transformer: { assetPlugins: ['react-native-svg-transformer'], }, }; ``` 4. 接下来,在你的组件中,使用 `react-native-svg` 中的 `<SvgUri>` 组件来加载本地 SVG 图像。首先,确保你的 SVG 图像位于项目的 `assets` 文件夹中。 ```javascript import React from 'react'; import { View } from 'react-native'; import SvgUri from 'react-native-svg-uri'; const MyComponent = () => { return ( <View> <SvgUri width={200} height={200} source={require('./assets/myImage.svg')} /> </View> ); }; export default MyComponent; ``` 在上面的示例中,我们使用 `require` 方法加载位于 `assets` 文件夹中的 `myImage.svg` 图像,并将其作为 `source` 属性传递给 `<SvgUri>` 组件。你可以根据自己的需要调整宽度和高度。 5. 确保你在重新启动 Metro Bundler 之前完成了以上步骤。你可以通过运行以下命令重新启动 Metro Bundler: ``` npx react-native start --reset-cache ``` 这样,你就可以使用 `react-native-svg` 和 `react-native-svg-transformer` 成功加载和显示本地 SVG 图像了。 希望对你有所帮助!如有任何疑问,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值