React Native Markdown Display 使用教程

80 0 0

React Native Markdown Display 使用教程

react-native-markdown-displayReact Native 100% compatible CommonMark renderer项目地址:https://gitcode.com/gh_mirrors/re/react-native-markdown-display

项目介绍

react-native-markdown-display 是一个用于在 React Native 应用中渲染 Markdown 内容的库。它是基于 markdown-it 开发的，提供了丰富的 Markdown 渲染功能，并且支持自定义规则和样式。

项目快速启动

安装

首先，你需要安装 react-native-markdown-display 库：

npm install react-native-markdown-display

或者使用 Yarn：

yarn add react-native-markdown-display

基本使用

以下是一个简单的示例，展示如何在 React Native 应用中使用 react-native-markdown-display 渲染 Markdown 内容：




import React from 'react';


import { SafeAreaView, StyleSheet } from 'react-native';


import Markdown from 'react-native-markdown-display';


 


const markdown = `


# 标题





这是一个 **Markdown** 示例。





- 列表项1


- 列表项2


- 列表项3


`;


 


const App = () => {


  return (


    <SafeAreaView style={styles.container}>


      <Markdown>{markdown}</Markdown>


    </SafeAreaView>


  );


};


 


const styles = StyleSheet.create({


  container: {


    flex: 1,


    padding: 20,


  },


});


 


export default App;

应用案例和最佳实践

自定义样式

你可以通过传递 style 属性来自定义 Markdown 的渲染样式：




import React from 'react';


import { SafeAreaView, StyleSheet } from 'react-native';


import Markdown from 'react-native-markdown-display';


 


const markdown = `


# 自定义样式示例





这是一个 **Markdown** 示例，带有自定义样式。


`;


 


const styles = StyleSheet.create({


  heading1: {


    fontSize: 32,


    color: 'blue',


  },


  strong: {


    fontWeight: 'bold',


    color: 'red',


  },


});


 


const App = () => {


  return (


    <SafeAreaView style={styles.container}>


      <Markdown style={styles}>{markdown}</Markdown>


    </SafeAreaView>


  );


};


 


export default App;

自定义规则

你还可以通过自定义规则来扩展 Markdown 的渲染功能：




import React from 'react';


import { SafeAreaView, StyleSheet } from 'react-native';


import Markdown, { getUniqueID } from 'react-native-markdown-display';


 


const markdown = `


# 自定义规则示例





这是一个 **Markdown** 示例，带有自定义规则。


`;


 


const rules = {


  heading1: (node, children, parent, styles) => {


    return (


      <Text key={getUniqueID()} style={[styles.heading1, { borderBottomWidth: 1 }]}>


        {children}


      </Text>


    );


  },


};


 


const App = () => {


  return (


    <SafeAreaView style={styles.container}>


      <Markdown rules={rules}>{markdown}</Markdown>


    </SafeAreaView>


  );


};


 


export default App;