@540deg/react-native-simple-markdown 中文文档教程

Question

react-native-simple-markdown

用于在 React Native 中使用原生组件呈现 Markdown 的组件，可与 iOS 和 安卓。 欢迎请求请求！ ？？？ ？？？

Getting started

yarn add react-native-simple-markdown

Future

这个库目前正在（有点）完全重写。 如果您短时间/长时间使用此库或有兴趣为未来塑造它：插话并与我们分享您的想法； 或查看样式部分，也需要一些帮助那里！

Usage

您需要做的就是导入 react-native-simple-markdown 然后使用 组件。

import React from 'react'
import Markdown from 'react-native-simple-markdown'

const MyAwesomeApp = () => {
  return (
    <Markdown styles={markdownStyles}>
      #Markdown in react-native is so cool! {'\n\n'}

      You can **emphasize** what you want, or just _suggest it_ ????…{'\n'}

      You can even [**link your website**](https://twitter.com/Charles_Mangwa) or if you prefer: [email somebody](mailto:email@somebody.com){'\n'}

      Spice it up with some GIFs ????:

      ![Some GIF](https://media.giphy.com/media/dkGhBWE3SyzXW/giphy.gif){'\n'}

      And even add a cool video ????!{'\n'}

      [![A cool video from YT](https://img.youtube.com/vi/dQw4w9WgXcQ/0.jpg)](http://www.youtube.com/watch?v=dQw4w9WgXcQ)

      [![Another one from Vimeo](https://i.vimeocdn.com/video/399486266_640.jpg)](https://vimeo.com/57580368)
    </Markdown>   
  )
}

const markdownStyles = {
  heading1: {
    fontSize: 24,
    color: 'purple',
  },
  link: {
    color: 'pink',
  },
  mailTo: {
    color: 'orange',
  },
  text: {
    color: '#555555',
  },
}

Properties

styles

将默认应用其样式。 但是，您可以传递一个 styles 属性来自定义它。

示例：

<Markdown
  styles={{
    heading1: {
      fontSize: 20,
    },
    strong: {
      fontWeight: 'bold',
    }
  }}
>
  #Hello ????
</Markdown>

rules

同样， 将默认应用其规则。 但是，您可以传递一个 rules 属性来添加您自己的属性，然后自定义 Markdown 元素的显示方式！

示例：

<Markdown
  rules={{
    image: {
      react: (node, output, state) => (
        <CustomImageComponent
          key={state.key}
          source={{ uri: node.target }}
        />
      ),
    },
  }}
>
  ![Alt text](/path/to/img.jpg)
</Markdown>

RNSM 还允许您轻松删除不需要的样式选项，而无需传入已实现/伪造其反应键以忽略这些样式选项的规则对象。

示例：

<Markdown
  styles={ markdownStyles }
  whitelist={['link', 'url']}
>
  { description }
</Markdown>

whitelist 将仅应用 link 和 url 默认样式，而 blacklist 则相反。 您不需要传入包含所有您不想要的样式的键的规则道具，也不需要再重新实现它们的样式输出。

errorHandler

如果在渲染过程中你的 Markdown 碰巧出现错误，你可以传递一个 errorHandler 和一个函数，让你看到发生了什么：

<Markdown
  errorHandler={(errors, children) => console.log(errors, children)}
>
...
</Markdown>

Styles

鉴于 React Native 渲染元素的方式已经在最新版本 (0.48+)，我们必须手动检查每条规则是否按预期工作：

• rendering properly on both iOS & Android
• being able to be styled on both platforms
• not breaking/overriding others rules when its own is applied

当满足这 3 个条件时，我们可以验证 Rendering 列。 请随意检查其中任何一项并发送 PR 以在 on Snack 上对其进行验证！

Property	Type	Rendering	Features
blockQuote	<View>	❌	Also blockQuoteBar (<View>) and blockQuoteText (<Text>)
br	<Text>	❌	-
del	<Text>	❌	-
em	<Text>	❌	-
hr	<View>	❌	-
heading	<Text>	❌	Also heading1 through heading6
image	<Image>	❌	ou can use resizeMode in <Markdown /> styles prop to set a resizeMode
inlineCode	<Text>	❌	-
link	<Text>	❌	-
list	<View>	❌	Also listItem (<View>), listItemBullet (<Text>), listItemBulletType (Unicode character), listItemNumber (<Text>) and listItemText (<Text>)
mailTo	<Text>	❌	-
paragraph	<View>	❌	-
plainText	<Text>	❌	Used for styling text without any associated styles
strong	<Text>	❌	-
table	<View>	❌	-
tableHeader	<View>	❌	-
tableHeaderCell	<View>	❌	-
tableRow	<View>	❌	-
tableRowCell	<View>	❌	-
tableRowLast	<View>	❌	Inherits from tableRow
text	<Text>	❌	-
u	<Text>	❌	-
url	<Text>	❌	-
video	<Image>	❌	Supports YouTube & Vimeo
view	<View>	❌	This is the View container where the Markdown is rendered

Credits

这个项目是从 react-native-markdown 由 @lwansbrough ????