如何在React Native的Markdown中渲染可交互表单组件？

完全可以通过react-native-marked的自定义分词器和渲染器，在Markdown内容里渲染可交互的表单组件。你的代码里有一处关键逻辑错误，导致表单没能正常渲染：

在CustomTokenizer的text方法中，当匹配不到[[customForm]]标记时，你返回了super.codespan(src)，这会把所有普通文本当成代码块处理，直接覆盖了默认的文本渲染逻辑，导致自定义标记的解析流程被打断。

修正后的完整代码如下：

import React from 'react';
import Markdown, {
  MarkedTokenizer,
  Renderer,
  CustomToken,
  RendererInterface,
} from 'react-native-marked';

import {TextInput, View, Switch, Button} from 'react-native';

class CustomTokenizer extends MarkedTokenizer<CustomToken> {
  text(this: MarkedTokenizer<CustomToken>, src: string) {
    // 匹配自定义表单标记，支持带参数的格式，比如[[input:username]]
    const formMatch = src.match(/\[\[(input|switch|button):?([^\]]*)\]\]/);
    if (formMatch) {
      const token: CustomToken = {
        type: 'custom',
        raw: formMatch[0],
        identifier: formMatch[1],
        args: {
          name: formMatch[2] || 'default'
        },
      };
      return token;
    }

    // 必须返回super.text(src)来处理普通文本
    return super.text(src);
  }
}

class CustomRenderer extends Renderer implements RendererInterface {
  custom(
    identifier: string,
    _raw: string,
    _children?: React.ReactNode[],
    args?: Record<string, unknown>,
  ): React.ReactNode {
    // 根据不同标识符渲染对应的表单组件
    switch (identifier) {
      case 'input':
        return (
          <TextInput
            style={{borderWidth: 1, borderColor: '#ccc', padding: 8, marginVertical: 4}}
            placeholder={`输入${args?.name || '内容'}`}
          />
        );
      case 'switch':
        return (
          <View style={{flexDirection: 'row', alignItems: 'center', marginVertical: 4}}>
            <Text>{args?.name || '选项'}：</Text>
            <Switch />
          </View>
        );
      case 'button':
        return (
          <Button
            title={args?.name || '提交'}
            onPress={() => alert('表单提交')}
            style={{marginVertical: 8}}
          />
        );
      default:
        return null;
    }
  }
}

export const MarkdownForm: React.FC = () => {
  const markdownText = `
  请填写以下信息：
  [[input:用户名]]
  [[input:邮箱]]
  [[switch:同意协议]]
  [[button:提交表单]]
  `;

  const renderer = new CustomRenderer();
  const tokenizer = new CustomTokenizer();

  return (
    <Markdown renderer={renderer} tokenizer={tokenizer} value={markdownText} />
  );
};

关键说明： #

• 修正了text方法的返回值，确保普通文本能正常渲染，同时自定义标记能被正确识别
• 扩展了匹配规则，支持带参数的自定义标记（如[[input:用户名]]），可以根据参数动态渲染组件
• 渲染器中实现了多种表单组件的渲染逻辑，你可以根据需求继续扩展更多组件类型

内容的提问来源于stack exchange，提问作者NikaA3