当前位置: 首页 > 软件库 > 手机/移动开发 > >

react-native-simple-markdown

授权协议 MIT License
开发语言 Java
所属分类 手机/移动开发
软件类型 开源软件
地区 不详
投 递 者 诸葛康胜
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

react-native-simple-markdown

A component for rendering Markdown in React Native with native components, working with both iOS & Android. Pull requests are welcome! �� ��

Getting started

yarn add react-native-simple-markdown

Future

This library is currently being (kinda) completely rewritten. If you've been using this lib for a short/long time or are interesting in shaping it for the future: just chime in and share your thoughts with us; or give a look at the styles section, some help is also need there!

Usage

All you need to do is import the react-native-simple-markdown and then use the<Markdown /> component.

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

<Markdown /> will apply its style by default. However you can pass a styles prop to customize it has you wish.

Example:

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

rules

Here again, <Markdown /> will apply its rules by default. However you can pass a rules prop to add your own and then customize how the Markdown elements will be displayed!

Example:

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

RNSM also allows you to remove easily unwanted styling options without having to pass in rule objects that have their react key implemented/dummied to ignore those styling options.

Example:

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

whitelist will only apply link and url default styles, while blacklist will do the opposite. You don't need to pass in a rules prop that contained a key for all the styles you don't want and reimplement their styling output anymore.

errorHandler

If you happened to have an error with your Markdown during the rendering, you can pass a errorHandler with a function that will let you see what's going on:

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

Styles

Given that the way React Native renders element has evolved in the latest versions (0.48+), we'll have to check manually that every single rule works as expected by:

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

When those 3 criteria are fulfilled, we can validate the Rendering column. Feel free to check any of these and send a PR to validate it 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

This project was forked from react-native-markdown by @lwansbrough ��

 相关资料
  • simple-react-calendar A simple calendar component for React based applications. A component that is easy to start using, yet flexible when you need customization. Usage You can find the component's on

  • 本文向大家介绍react-native 启动React Native Packager,包括了react-native 启动React Native Packager的使用技巧和注意事项,需要的朋友参考一下 示例 在最新版本的React Native上,无需运行打包程序。它将自动运行。 默认情况下,这将在端口8081上启动服务器。要指定服务器所在的端口            

  • 百度移动统计SDK支持使用react native框架的H5页面统计,封装好的插件已经在github上开源,相关用法具体请参考:https://github.com/BaiduMobileAnalysis/baidumobstat-react-native。

  • The React Native environment has a lot of little quirks, so this documentation is aimed at helping smooth those over. Please feel free to create issues on GitHub for recommendations and additions to t

  • React Native 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 React Native的原理是在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以<Ima

  • simple-react-full-stack This is a boilerplate to build a full stack web application using React, Node.js, Express and Webpack. It is also configured with webpack-dev-server, eslint, prettier and babel