https://github.com/flyskywhy/react-native-font-sim

React Native font SimSun <宋体> SimHei <黑体> KaiTi<楷体> , support iOS and Android both.
https://github.com/flyskywhy/react-native-font-sim

font kaiti react-native simhei simsun

Last synced: 9 months ago
JSON representation

React Native font SimSun <宋体> SimHei <黑体> KaiTi<楷体> , support iOS and Android both.

• Host: GitHub
• URL: https://github.com/flyskywhy/react-native-font-sim
• Owner: flyskywhy
• License: mit
• Created: 2017-10-11T02:34:57.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-03-15T07:03:07.000Z (over 3 years ago)
• Last Synced: 2025-09-20T14:53:16.449Z (10 months ago)
• Topics: font, kaiti, react-native, simhei, simsun
• Homepage:
• Size: 16.4 MB
• Stars: 7
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-native-font-sim

[![npm version](http://img.shields.io/npm/v/react-native-font-sim.svg?style=flat-square)](https://npmjs.org/package/react-native-font-sim "View this project on npm")

[![npm downloads](http://img.shields.io/npm/dm/react-native-font-sim.svg?style=flat-square)](https://npmjs.org/package/react-native-font-sim "View this project on npm")

[![npm licence](http://img.shields.io/npm/l/react-native-font-sim.svg?style=flat-square)](https://npmjs.org/package/react-native-font-sim "View this project on npm")

[![Platform](https://img.shields.io/badge/platform-ios%20%7C%20android-989898.svg?style=flat-square)](https://npmjs.org/package/react-native-font-sim "View this project on npm")

Font `SimSun(宋体)`, `SimHei(黑体)` and `KaiTi(楷体)`, can work with `` or `` or [react-native-font-picker](https://github.com/flyskywhy/react-native-font-picker).

## Installation

    npm install react-native-font-sim

    npx react-native-asset -a ./node_modules/react-native-font-sim/fonts

optional:

    cd android/app/src/main/assets/fonts/

    rm SimSun.ttf SimHei.ttf KaiTi.ttf

    ln -s ../../../../../../node_modules/react-native-font-sim/fonts/* ./

    cd -

If use `ln -s` above optional, run `react-native-asset` next time will got error, then need manually `cp` them before run `react-native-asset`.

PS: The same steps can also install ttf files in e.g. [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).

## Usage

### ``

```

I'm 宋体.

I'm 黑体.

I'm 楷体.

```

### ``

```

import {GCanvasView, registerFont} from '@flyskywhy/react-native-gcanvas';

if (Platform.OS !== 'web') {

  var RNFS = require('react-native-fs');

}

...

if (Platform.OS === 'android') {

  const destFontsPath = `${RNFS.ExternalDirectoryPath}/fonts`;

  if (!(await RNFS.exists(destFontsPath))) {

    await RNFS.mkdir(destFontsPath);

  }

  const dest = `${destFontsPath}/KaiTi.ttf`;

  await RNFS.copyFileAssets('fonts/KaiTi.ttf', dest);

  registerFont(dest);

}

const ctx = this.canvas.getContext('2d');

ctx.font = '50px KaiTi';

ctx.fillText('原生画布NativeCanvas', 20, 100);

...

 this.canvas = canvas}

 style={styles.gcanvas}

/>

```

### as custom fonts of [react-native-font-picker](https://github.com/flyskywhy/react-native-font-picker)

Thus can let e.g. `KaiTi` be choosed just like `times new roman` as [Font Picker to fillText](https://github.com/flyskywhy/GCanvasRNExamples/blob/master/app/components/FontPicker2FillText.js) on [@flyskywhy/react-native-gcanvas](https://github.com/flyskywhy/react-native-gcanvas) by [react-native-font-picker](https://github.com/flyskywhy/react-native-font-picker).



## Donate

To support my work, please consider donate.

- ETH: 0xd02fa2738dcbba988904b5a9ef123f7a957dbb3e

-