如何在React Native应用中渲染字符串形式的代码视图？

直接引用字符串变量只会显示文本，因为React Native无法自动将字符串解析为可渲染的JSX元素。以下是几种可行的解决办法：

方法一：使用react-native-render-html库（推荐，适合类HTML的JSX字符串） #

这个库可以将HTML/类HTML的字符串转换为React Native原生组件，能处理大部分基础标签和样式：

1. 安装依赖：

npm install react-native-render-html
# 或
yarn add react-native-render-html

2. 修改组件代码：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import RenderHtml from 'react-native-render-html';

export default const SimpleComponent = () => {
  // 转换为HTML兼容的样式写法
  const htmlCode = '<div style="font-size:20px;">Hello World!</div>';

  return (
    <View style={styles.container}>
      <Text style={styles.text}>How are you</Text>
      <RenderHtml contentWidth={300} source={{ html: htmlCode }} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  text: {
    fontSize: 16,
    marginBottom: 10,
  },
});

方法二：动态解析JSX（注意安全风险） #

如果你的字符串是可信的（非用户输入），可以用eval结合Babel转译来动态生成组件：

1. 安装依赖：

npm install @babel/standalone
# 或
yarn add @babel/standalone

2. 组件代码：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import babel from '@babel/standalone';

export default const SimpleComponent = () => {
  let customCode='<View><Text style={{fontSize:20}}>Hello World!</Text></View>'

  // 转译JSX为React.createElement调用
  const transpiledCode = babel.transform(`const Component = () => ${customCode};`, {
    presets: ['react'],
  }).code;

  // 动态执行代码并获取组件
  const { Component } = eval(transpiledCode);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>How are you</Text>
      <Component />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  text: {
    fontSize: 16,
    marginBottom: 10,
  },
});

注意：eval存在安全风险，若字符串来自不可信的用户输入，绝对不要使用这种方法，可能导致代码注入攻击。

方法三：手动解析字符串（安全可控） #

如果你的字符串结构固定，可以手动解析标签和属性，生成对应的React元素，完全避免安全问题：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default const SimpleComponent = () => {
  let customCode='<View><Text style={{fontSize:20}}>Hello World!</Text></View>'

  // 针对当前场景的简单解析逻辑
  const parseJSXString = (str) => {
    const textMatch = str.match(/<Text style={{fontSize:(\d+)}}>(.*?)<\/Text>/);
    if (textMatch) {
      const fontSize = parseInt(textMatch[1], 10);
      const textContent = textMatch[2];
      return <Text style={{ fontSize }}>{textContent}</Text>;
    }
    return null;
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>How are you</Text>
      <View>{parseJSXString(customCode)}</View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  text: {
    fontSize: 16,
    marginBottom: 10,
  },
});

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