React Native中如何为tcomb表单设置自定义标签？

嘿，我之前也遇到过tcomb里自定义字段标签的坑——你直接改字段名肯定没用的，因为tcomb的struct默认就把字段的键名当标签用，而且JavaScript里字段名带空格还得加引号，反而麻烦。给你两个实用的解决办法：

方案1：给字段类型加元数据（推荐，一劳永逸） #

你可以给每个字段的类型附加meta信息，把想要的标签放进去，不管是用tcomb-form渲染还是自己处理显示，都能拿到这个友好标签。修改后的代码是这样的：

var type = t.enums({ type1: 'Red', type2: 'Rosé', type3: 'White' });
var FichaUm = t.struct({
  WineName: t.String.meta({ label: 'Wine Name' }),
  harvest: harvest.meta({ label: 'Harvest Year' }), // 假设你已经定义了harvest这个类型
  type: type.meta({ label: 'Wine Type' }),
  producername: t.String.meta({ label: 'Producer Name' }),
  country: country.meta({ label: 'Country' }), // 同理，假设country是你定义的类型
  zone: t.String.meta({ label: 'Wine Zone' })
});

这样定义后，用tcomb-form渲染表单时会自动用meta里的label当显示标签；要是你自己写逻辑展示数据，也能通过FichaUm.meta.props.WineName.meta.label拿到这个自定义标签。

方案2：渲染表单时临时指定标签（适合快速调整） #

要是你不想改struct的定义，只是渲染表单时需要换标签，可以在tcomb-form的配置里单独设置：

// 先创建表单组件实例
const Form = t.form.Form;
// 配置每个字段的标签
const formOptions = {
  fields: {
    WineName: { label: 'Wine Name' },
    producername: { label: 'Producer Name' }
    // 其他字段照着这个格式加就行
  }
};

// 渲染的时候把options传进去
ReactDOM.render(<Form type={FichaUm} options={formOptions} />, document.getElementById('form'));

为啥直接改字段名不行？ #

JavaScript里对象键名带空格的话，得用引号包起来（比如'Wine Name': t.String），但tcomb还是会把这个带空格的字符串当作字段的键，不会自动当成友好标签。而且之后访问这个字段还得写obj['Wine Name']，不如用原来的WineName键名，再通过元数据加标签来得方便。

内容的提问来源于stack exchange，提问作者Luiz Gustavo Nunes