如何从我的静态数据中解析和电话号码并将其渲染为可单击的链接项目

Question

我正在使用Expo构建我的第一个React Native应用程序。我的应用程序中有一个常见问题解答部分，其中我用手风琴组件呈现问题和答案。手风琴组件正在用预定义的静态数据集填充。当用户选择一个问题时，答案将在其下方扩展，并在选择另一个问题时崩溃。该手风琴运作良好，但是，在给定的一些答案中，有建议的链接要遵循。

现在，这些链接作为静态字符串呈现。我正在尝试使它们作为可单击的链接呈现。

这是我的代码的一个示例：

ACTORCION组件

import React, { useState } from 'react';
import { StyleSheet,Text,View,TouchableOpacity} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Accordion from 'react-native-collapsible/Accordion';
import data from './DataSet.js

const AccordionList = ({data}) => {

  // Default active selector
  const [activeSections, setActiveSections] = useState([]);

  const setSections = (sections) => {
    //setting up a active section state
    setActiveSections(sections.includes(undefined) ? [] : sections);
  };

  const renderHeader = (section, _, isActive) => {
    //Accordion Header view - Questions
    return (
      <Animatable.View
        duration={400}
        style={[styles.header, isActive ? styles.active : styles.inactive]}
        transition="backgroundColor">
           <Text style={styles.headerText}>

               {section.title}{/* <---Renders Question */}

           </Text>
      </Animatable.View>
    );
  };

  const renderContent = (section, _, isActive) => {
    //Accordion Content view - Answers
    return (
      <Animatable.View
        duration={400}
        style={[styles.content, isActive ? styles.active : styles.inactive]}
        transition="backgroundColor">
        <Animatable.Text
          animation={isActive ? 'bounceIn' : undefined}
          style={{ textAlign: 'left' }}>

              {section.content} {/* <---Renders Answer */}

        </Animatable.Text>
      </Animatable.View>
    );
  };

  return (
    <View>
          <Accordion
            activeSections={activeSections}
            sections={data}
            touchableComponent={TouchableOpacity}
            renderHeader={renderHeader}
            renderContent={renderContent}
            duration={400}
            onChange={setSections}
          />
    </View>

  );
};

export default AccordionList;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "black",

  },
  header: {
    backgroundColor: '#F5FCFF',
    padding: 15,
    marginTop:10,
    borderRadius: 5,
    marginHorizontal:10,
  },
  headerText: {
    textAlign: 'center',
    fontSize: 16,
    fontWeight: '700',
  },
  content: {
    padding: 20,
    backgroundColor: "grey",
    borderRadius: 5,
    marginHorizontal:10,
    textAlign:'right',
    lineHeight:1.5
  },
  inactive: {
    backgroundColor: 'rgba(255,255,255,1)',
  },
  active: {
    backgroundColor: 'rgba(245,252,255,1)',
  },

  selectTitle: {
    fontSize: 20,
    fontWeight: '500',
    padding: 10,
    textAlign: 'center',
    color:"#efefef"
  },


});

dataset.js.js

data:[
    {
        title:"What is Ameelio?",
        content:"Ameelio is a nonprofit service that allows friends and families to send letters, postcards, games and more for free through their mobile application."
    },
    {
        title:"What can I do on Ameelio?",
        content:"Yes. You may call customer service any time at 1 (800) 555-5555"
    },
    {
        title:"Where can I find more information?",
        content:"You can find more information on https://ameelio.org."
    },
    {
        title:"How do I get the Ameelio app?",
        content:"Navigate to https://play.google.com/store/apps/details?id=com.ameelio.letters_mobile to download the free app."
    },
]

在摘要中，我正在尝试找出如何从我的静态数据中解析和电话号码，并将其作为可单击的链接项目渲染。

Answer 1

我通过使用react-native-hyperlink解决了此问题。

...
import Hyperlink from "react-native-hyperlink";
...

...
    //Accordion Content view - Answers
    return (
      <Animatable.View
        accessible
        accessibilityLabel={section.content}
        duration={400}
        style={[styles.content, isActive ? styles.active : styles.inactive]}
        transition="backgroundColor"
      >
        <Hyperlink linkDefault linkStyle={{ color: "#2980b9", fontSize: 20 }}>
          <Animatable.Text
            accessibilityRole="text"
            animation={isActive ? "bounceIn" : undefined}
            style={styles.contentText}
          >
            {section.content}
          </Animatable.Text>
        </Hyperlink>
      </Animatable.View>
    );
...