Markdown\n\nO componente Markdown permite renderizar texto formatado utilizando a sintaxe Markdown diretamente em sua aplicação React Native. Ele utiliza a biblioteca react-native-markdown-display para a renderização.\n\n## Importação\n\njsx\nimport { Markdown } from '@platformbuilders/fluid-react-native';\n\n\n## Uso Básico\n\njsx\nimport React from 'react';\nimport { View } from 'react-native';\nimport { Markdown } from '@platformbuilders/fluid-react-native';\n\nconst BasicMarkdownExample = () => {\n const markdownContent = `\n# Título Principal\n\nEste é um parágrafo com **texto em negrito** e *texto em itálico*.\n\n- Item de lista 1\n- Item de lista 2\n\n[Este é um link](https://www.google.com)\n `;\n \n return (\n <View>\n <Markdown>\n {markdownContent}\n </Markdown>\n </View>\n );\n};\n\n\n## Variações\n\n### Estilo Personalizado\n\nVocê pode aplicar estilos de texto personalizados ao corpo do conteúdo Markdown utilizando a propriedade textStyle.\n\njsx\n<Markdown \n textStyle={{ \n fontSize: 16,\n color: '#333',\n lineHeight: 24 \n }}\n>\n # Título com Estilo Personalizado\n \n Este texto terá o estilo definido pela `textStyle`.\n</Markdown>\n\n\n## Acessibilidade\n\nA biblioteca react-native-markdown-display, utilizada internamente, aplica propriedades básicas de acessibilidade aos elementos renderizados, como cabeçalhos e links. No entanto, para garantir uma acessibilidade completa, siga as boas práticas:\n\n### Boas Práticas de Acessibilidade\n\n1. Estrutura Semântica: Use a sintaxe Markdown corretamente para criar uma estrutura lógica (cabeçalhos, listas, etc.). Isso ajuda os leitores de tela a navegar pelo conteúdo.\n2. Descrições de Links: Use textos descritivos para links. Em vez de "clique aqui", use "Leia mais sobre acessibilidade".\n3. Contraste: Verifique se as cores do texto e dos links têm contraste suficiente com o fundo, especialmente se você personalizar os estilos.\n4. Texto Alternativo para Imagens: Se a sintaxe Markdown incluir imagens (embora o wrapper atual não exponha diretamente essa funcionalidade da biblioteca subjacente), forneça texto alternativo descritivo.\n\n## Props\n\n| Prop | Tipo | Padrão | Descrição |\n|-------------|------------|---------|--------------------------------------------------------------------------|\n| children | string | - | O conteúdo Markdown a ser renderizado. |\n| textStyle | TextStyle | {} | Estilos a serem aplicados ao corpo principal do texto Markdown (body). |\n\n## Tipos\n\n### TextStyle\n\nRefere-se ao tipo TextStyle padrão do React Native.\n\ntypescript\nimport { TextStyle } from 'react-native';\n\n\n## Exemplo Completo\n\njsx\nimport React from 'react';\nimport { View, StyleSheet, ScrollView } from 'react-native';\nimport { Markdown, Typography } from '@platformbuilders/fluid-react-native';\n\nconst MarkdownExample = () => {\n const basicMarkdown = `\n# Exemplo Básico\n\nRenderiza texto simples e formatação como **negrito**, *itálico*, e ~tachado~.\n `;\n\n const listsMarkdown = `\n## Listas\n\n### Lista Não Ordenada\n\n- Item 1\n- Item 2\n - Sub-item 2.1\n - Sub-item 2.2\n- Item 3\n\n### Lista Ordenada\n\n1. Primeiro item\n2. Segundo item\n3. Terceiro item\n `;\n\n const linksAndCodeMarkdown = `\n## Links e Código\n\nVisite o [site do Google](https://www.google.com).\n\nExemplo de código inline: \`const a = 1;\`\n\nExemplo de bloco de código:\n\n\`\`\`javascript\nfunction greet(name) {\n console.log('Olá, ' + name + '!');\n}\ngreet('Mundo');\n\`\`\`\n `;\n\n const styledMarkdown = `\n## Texto com Estilo\n\nEste parágrafo usará o estilo personalizado definido na prop \`textStyle\`.\n `;\n\n return (\n <ScrollView style={styles.container}>\n <Typography variant=\"h3\" style={styles.title}>\n Exemplos do Componente Markdown\n </Typography>\n \n <View style={styles.section}>\n <Typography variant=\"subtitle\" style={styles.sectionTitle}>\n Uso Básico\n </Typography>\n <Markdown>{basicMarkdown}</Markdown>\n </View>\n \n <View style={styles.separator} />\n \n <View style={styles.section}>\n <Typography variant=\"subtitle\" style={styles.sectionTitle}>\n Listas\n </Typography>\n <Markdown>{listsMarkdown}</Markdown>\n </View>\n \n <View style={styles.separator} />\n \n <View style={styles.section}>\n <Typography variant=\"subtitle\" style={styles.sectionTitle}>\n Links e Código\n </Typography>\n <Markdown>{linksAndCodeMarkdown}</Markdown>\n </View>\n \n <View style={styles.separator} />\n \n <View style={styles.section}>\n <Typography variant=\"subtitle\" style={styles.sectionTitle}>\n Com Estilo Personalizado\n </Typography>\n <Markdown\n textStyle={styles.customTextStyle}\n >\n {styledMarkdown}\n </Markdown>\n </View>\n </ScrollView>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n padding: 16,\n backgroundColor: '#FFFFFF',\n },\n title: {\n marginBottom: 24,\n },\n section: {\n marginBottom: 24,\n },\n sectionTitle: {\n marginBottom: 8,\n },\n separator: {\n height: 1,\n backgroundColor: '#E0E0E0',\n marginVertical: 24,\n },\n customTextStyle: {\n fontSize: 16,\n color: '#555',\n lineHeight: 26,\n },\n});\n\nexport default MarkdownExample;\n