React Native动态为匹配文本应用样式及链接功能实现求助

我看了你的代码，发现几个关键问题导致格式化后的内容显示为空，下面逐个分析并给出修复方案：

主要问题分析 #

• formatedContent方法没有返回处理结果：你在format.map()内部return了JSX，但整个方法没有把map的结果返回出去，相当于这个方法最后返回undefined，所以显示为空。
• 错误引用数据源：你在render里用get(faqjson, 'answer')，但FlatList的每个项是item，应该用item.answer和item.format来获取当前问答的内容和格式化规则。
• 字符串处理逻辑有缺陷：当前的字符串分割方式会丢失部分内容，而且当找不到匹配文本时（indexOfText返回-1）会导致substring报错。
• 样式判断语法错误：typeof styles === Object是错误的，typeof运算符返回的是字符串，应该用typeof styles === 'object' && styles !== null。
• 链接组件的样式应用错误：你把样式加在了TouchableOpacity上，应该把样式应用到内部的Text组件，否则文字不会生效样式。

修复后的完整代码 #

import React, { PureComponent } from 'react';
import { View, Text, TouchableWithoutFeedback, TouchableOpacity, Image, Linking } from 'react-native';
import { get } from 'lodash'; // 假设你用了lodash的get方法

export default class Cell extends PureComponent {
  state = { isSelected: false };

  // 处理格式化文本，返回JSX数组
  formatedContent = (formatRules, originalText) => {
    if (!formatRules || !originalText) return <Text>{originalText}</Text>;

    let currentText = originalText;
    const contentElements = [];
    let keyCounter = 0;

    formatRules.forEach((item) => {
      const { styles, link, text } = item;
      const textIndex = currentText.indexOf(text);

      // 如果找不到匹配文本，直接添加剩余文本并结束
      if (textIndex === -1) {
        contentElements.push(<Text key={keyCounter++}>{currentText}</Text>);
        return;
      }

      // 添加匹配文本之前的普通文本
      if (textIndex > 0) {
        contentElements.push(<Text key={keyCounter++}>{currentText.slice(0, textIndex)}</Text>);
      }

      // 处理格式化的文本（带链接或样式）
      let formattedElement;
      if (link && link.length > 0) {
        formattedElement = (
          <TouchableOpacity
            key={keyCounter++}
            onPress={() => Linking.openURL(link)}
          >
            <Text style={typeof styles === 'object' && styles !== null ? styles : {}}>
              {text}
            </Text>
          </TouchableOpacity>
        );
      } else {
        formattedElement = (
          <Text
            key={keyCounter++}
            style={typeof styles === 'object' && styles !== null ? styles : {}}
          >
            {text}
          </Text>
        );
      }
      contentElements.push(formattedElement);

      // 更新剩余文本为匹配文本之后的内容
      currentText = currentText.slice(textIndex + text.length);
    });

    // 添加最后剩余的文本
    if (currentText.length > 0) {
      contentElements.push(<Text key={keyCounter++}>{currentText}</Text>);
    }

    return contentElements;
  };

  onPress = () => {
    const { index, onHeaderSelected } = this.props;
    this.setState(prevState => ({ isSelected: !prevState.isSelected }));
  };

  render() {
    const { isSelected } = this.state;
    const { item } = this.props;
    // 正确使用当前item的数据源
    const answerText = item.answer;
    const formatRules = item.format;

    return (
      <View style={styles.container}>
        <TouchableWithoutFeedback onPress={this.onPress}>
          <View style={styles.questionContainer}>
            <Text style={styles.question}>{item.question}</Text>
            <Image 
              source={isSelected ? res.images.arrow_up : res.images.arrow_down} 
              style={styles.image} 
            />
          </View>
        </TouchableWithoutFeedback>
        {isSelected && (
          <View style={styles.answerContainer}>
            {/* 直接渲染formatedContent返回的JSX数组，不需要包裹在单个Text里 */}
            {this.formatedContent(formatRules, answerText)}
          </View>
        )}
      </View>
    );
  }
}

// 假设你的样式定义在这里
const styles = {
  container: {
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    padding: 16,
  },
  questionContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  question: {
    fontSize: 16,
    fontWeight: '500',
  },
  image: {
    width: 20,
    height: 20,
  },
  answerContainer: {
    marginTop: 12,
    paddingLeft: 0,
  },
};

关键修复点说明 #

1. 返回处理后的JSX数组：formatedContent现在会收集所有文本片段和格式化元素，最后返回一个数组，确保所有内容都被渲染。
2. 正确引用当前item的数据：不再用faqjson，而是直接使用FlatList传递的item对象，确保每个Cell渲染对应的数据。
3. 健壮的字符串处理：添加了找不到匹配文本的判断，避免报错，同时正确截取剩余文本，不会丢失内容。
4. 修正样式判断逻辑：使用正确的typeof判断语法，确保样式能正确应用。
5. 调整链接组件的样式位置：把样式应用到内部的Text组件，确保文字的样式（比如下划线、颜色）能正常显示。
6. 添加key属性：每个动态生成的JSX元素都加了唯一的key，符合React的要求，避免警告。

这样修改后，你的问答文本应该能正确显示格式化后的内容，包括加粗文本和可点击的邮件链接了。

内容的提问来源于stack exchange，提问作者Anilkumar iOS Developer