枚举
枚举消除了大量 UI 代码重复,同时实现了准确的翻译。<fbt:enum>
和 fbt.enum
都提供了添加临时或预定义和共享枚举的能力。
临时枚举
临时枚举可以内联提供给 enum-range
属性,或者作为 fbt.enum
的第二个参数。
枚举映射
<fbt desc="购买提示">
购买新的
<fbt:enum enum-range={{
CAR: 'car',
HOUSE: 'house',
BOAT: 'boat',
HOUSEBOAT: 'houseboat',
}} value={enumVal} />!
</fbt>
fbt(
'购买新的 ' +
fbt.enum(enumVal, {
CAR: 'car',
HOUSE: 'house',
BOAT: 'boat',
HOUSEBOAT: 'houseboat',
}),
'购买提示',
);
速记数组(键 = 值)
速记数组临时枚举的功能就像你有一个 {value: value}
映射。
<fbt desc="购买提示">
购买新的
<fbt:enum enum-range={[
'car', 'house', 'boat', 'houseboat']
} value={enumVal} />!
</fbt>
fbt(
'购买新的' + fbt.enum(enumVal, ['car', 'house', 'boat', 'houseboat']),
'购买提示',
);
以上所有示例 提取 相同的 4 个单独的字符串,用于像这样的 JSON 中的翻译
{
"phrases": [
{
"hashToLeaf": {
"tGN0j5ePJCeH9fIlp3Yq6w==": {
"text": "购买新的车!",
"desc": "购买提示",
},
"ElXst6oKNLh1XU8GjJucQQ==": {
"text": "购买新的房子!",
"desc": "购买提示",
},
"fAHV109uPI7aCxZqNmuTfg==": {
"text": "购买新的船!",
"desc": "购买提示",
},
"end24pKDi2/oxKff1YEXzQ==": {
"text": "购买新的船屋!"
"desc": "购买提示",
},
},
...
},
共享枚举
如果你需要多次使用同一个枚举,你可以使用预定义的枚举。这些枚举模块名称需要以 $FbtEnum
结尾,必须能够 "JSON.stringifiable"
,并且应该具有简单的键/值结构。
它们还需要一个单独的构建步骤来生成一个枚举清单和源清单,使其在“构建时”可用于 babel-plugin-fbt
。
// Example$FbtEnum.js
const Example$FbtEnum = {
LINK: "link",
PAGE: "page",
PHOTO: "photo",
POST: "post",
VIDEO: "video",
};
module.exports = Example$FbtEnum;
// Demo.react.js
const Example$FbtEnum = require('Example$FbtEnum');
<fbt desc="示例枚举">
<fbt:param name="name">{this.state.ex2Name}</fbt:param>
有一个
<fbt:enum
enum-range={Example$FbtEnum}
value={this.state.exampleObject}
/>
to share!
</fbt>
ES6 导入/导出语法
支持 ES6 导入/导出语法,但 Enum 必须作为 default
导出。
// Example$FbtEnum.js
const Example$FbtEnum = {
LINK: "link",
PAGE: "page",
PHOTO: "photo",
POST: "post",
VIDEO: "video",
};
export default Example$FbtEnum;
// Demo.react.js
import Example$FbtEnum from 'Example$FbtEnum';
<fbt desc="示例枚举">
<fbt:param name="name">{this.state.ex2Name}</fbt:param>
有一个
<fbt:enum
enum-range={Example$FbtEnum}
value={this.state.exampleObject}
/>
to share!
</fbt>