我们收到了一些问题，询问我们如何以同时适用于 React Native 和 React JS（web）的方式处理资源（图像、视频、声音）。
指定资源位置
在 Web 上，资源简单地通过 URL 引用，并由浏览器异步加载。
<RX.Image source={ 'https://mydomain.com/images/appLogoSmall.jpg' }/>
React Native 应用程序通常将资源打包在应用程序包中，因此它们从本地设备存储中加载。在这种情况下，路径以相对文件系统路径的形式指定。但是，您需要通过调用“require”来调用 React Native 打包器，而不是直接传递路径。
<RX.Image source={ require('./images/appLogoSmall.jpg') }/>
打包器要求资源路径指定为字符串字面量。换句话说，它不能在运行时构造或由辅助方法返回。有关此限制的更多详细信息，请参阅 React Native 文档。
这使得编写在 Web 和原生平台都能运行的跨平台代码变得困难。以下是我们在 Skype 应用程序中解决此问题的方法。
AppAssets 模块
我们创建了一个“AppAssets”接口，其中包括应用程序中每个资源的访问器方法。
// File: AppAssets.d.ts
declare module 'AppAssets' {
interface IAppAssets {
appLogoSmall: string;
appLogoLarge: string;
notificationIcon: string;
// ... etc.
}
const Assets: IAppAssets;
}
然后我们为 Web 和原生平台都实现了这个接口。
// File: AppAssetsWeb.ts
import AppAssets = require('AppAssets');
import AppConfig = require('./AppConfig');
class AppAssetsImpl implements AppAssets.IAppAssets {
appLogoSmall = AppConfig.getImagePath('skypeLogoSmall.png');
appLogoLarge = AppConfig.getImagePath('skypeLogoLarge.png');
notificationIcon = AppConfig.getImagePath('notificationIcon.gif');
// ... etc.
}
export const Assets: AppAssets.IAppAssets = new AppAssetsImpl();
// File: AppAssetsNative.ts
import AppAssets = require('AppAssets');
class AppAssetsImpl implements IAppAssets.Collection {
get appLogoSmall() { return require('..images/skypeLogoSmall.png'); }
get appLogoLarge() { return require('..images/skypeLogoLarge.png'); }
get notificationIcon() { return require('../images/notificationIcon.gif'); }
// ... etc.
}
export const Assets: AppAssets.IAppAssets = new AppAssetsImpl();
上述代码中有几点值得注意。首先，我们使用接口来确保 Web 和原生实现保持同步。如果您忘记将资源添加到这两个文件，TypeScript 编译器将在构建时检测到错误。
其次，Web 实现正在使用辅助方法 getImagePath 来构造完整的 URL。它使用动态可配置的域名构建此 URL，允许我们将应用程序部署到测试 Web 服务器或发布到生产服务器。
第三，原生实现使用了访问器。这会将资源的加载延迟到首次访问时。如果没有这个技巧，所有资源都会在 AppAssetsNative 模块初始化时加载，从而增加应用程序启动时间。
现在我们可以以跨平台的方式引用资源。
import AppAssets = require('AppAssets');
<RX.Image source={ AppAssets.Assets.appLogoSmall }/>
别名
现在我们有了两种实现（一种用于 Web，另一种用于原生），我们如何根据我们正在构建的平台“链接”正确的版本呢？我们通过在构建过程中进行轻量级的“别名”步骤来完成此操作。此步骤将 require('AppAssets') 替换为 require('./ts/AppAssetsWeb') 或 require('./ts/AppAssetsNative')，具体取决于正在构建的平台。
我将提供 gulp 语法的示例，但相同的技术可用于 grunt 或其他任务脚本运行时。
var config = {
aliasify: {
src: './.temp/' + argv.platform,
dest: getBuildPath() + 'js/',
aliases: (argv.platform === 'web') ?
// Web Aliases
{
'AppAssets': './ts/AppAssetsWeb'
} :
// Native Aliases
{
'AppAssets': './ts/AppAssetsNative'
}
}
}
function aliasify(aliases) {
var reqPattern = new RegExp(/require\(['"]([^'"]+)['"]\)/g);
// For all files in the stream, apply the replacement.
return eventStream.map(function(file, done) {
if (!file.isNull()) {
var fileContent = file.contents.toString();
if (reqPattern.test(fileContent)) {
file.contents = new Buffer(fileContent.replace(reqPattern, function(req, oldPath) {
if (!aliases[oldPath]) {
return req;
}
return "require('" + aliases[oldPath] + "')";
}));
}
}
done(null, file);
});
}
gulp.task('apply-aliases', function() {
return gulp.src(path.join(config.aliasify.src, '**/*.js'))
.pipe(aliasify(config.aliasify.aliases))
.pipe(gulp.dest(config.aliasify.dest))
.on('error', handleError);
});
// Here's our full build task pipeline. I haven't provided the task
// definitions for all of these stages, but you can see where the
// 'apply-aliases' task fits into the pipeline.
gulp.task('run', function(callback) {
runSequence('clean', 'build', 'apply-aliases', 'watch', 'lint', callback);
});
