search

Shopify / react-native-skia

High-performance React Native Graphics using Skia
https://shopify.github.io/react-native-skia
MIT License
6.98k stars 452 forks source link

Text component draws Chinese garbled characters #2695

Closed shellyaoo closed 2 weeks ago

shellyaoo commented 1 month ago

Description

import { Canvas, Image as SkiaIamge, useImage, Path, Skia, FontStyle, Text as SkiaText, useTexture } from '@shopify/react-native-skia';

const familyName = Platform.select({ ios: "Helvetica", default: "serif" }); const fontMgr = Skia.FontMgr.System(); const typeface = fontMgr.matchFamilyStyle(familyName, FontStyle.Bold); const font = Skia.Font(typeface, 12);

<Canvas style={[styles.image, { height: editImgHeight, width: editImgWidth }]}

<SkiaText x={0} y={30} text={'你好呀，世界'} font={font} style="fill" color={'#DE4188'} />

Text component draws Chinese garbled characters

My project needs to support both Chinese and English. English is not garbled, but Chinese is garbled. Is it because the font is not supported? My phone can support Chinese display，

The displayed Chinese effect is as follows

Image

shellyaoo commented 1 month ago

"@shopify/react-native-skia": "^1.4.2", It is in the Expo environment

The Expo framework was tested on the HarmonyOS machine

wcandillon commented 2 weeks ago

Yes this is definitely because of the font. We test Chinese characters in our test suite. If you think there is a bug, please submit a reproduction and we will investigate it. Closing it for now.