1

React VR 是否支持 utf-8？

例子：

export default class vrhw extends React.Component {
  render() {
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <Text
          style={{
            backgroundColor: '#777879',
            fontSize: 0.8,
            fontWeight: '400',
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [0, 0, -3]}],
          }}>
          黎跃春
        </Text>
      </View>
    );
  }
};

AppRegistry.registerComponent('vrhw', () => vrhw);
4

1 回答 1

0

默认情况下，ReactVR 仅支持罗马和西里尔字符，对于任何其他类型的字符，您必须加载自定义字体。幸运的是，官方 repo 中已经有预制字体，它们只是没有作为 npm 包的一部分发布。您必须手动将字体从此处复制到您的项目中（假设在 下/fonts）。

对于日语来说，它更简单，因为您只需要加载一种字体。只需使用loadFontfrom 方法OVRUI，将其指向您的字体文件，然后VRInstance在创建时将结果传递给您。

// vr/client.js
import {VRInstance} from 'react-vr-web';
import * as OVRUI from 'ovrui';

// Store the default font, we'll extend it with Japanese support.
const font = OVRUI.loadFont();

function init(bundle, parent, options) {
  OVRUI.loadFont('../fonts/japanese.fnt', '../fonts/japanese.png').then((fallbackFont) => {
    OVRUI.addFontFallback(font, fallbackFont);

    const vr = new VRInstance(bundle, 'VRTEST', parent, {
      font: font,
      ...options,
    });

    vr.render = function() {};
    vr.start();
  });
}

window.ReactVR = {init};

对于中文，您需要加载三个字符集。由于loadFont是 anync，我们需要跟踪加载了多少字体，并且只有VRInstance在它们都准备好时才初始化。

// vr/client.js
import {VRInstance} from 'react-vr-web';
import * as OVRUI from 'ovrui';

const fallbackFonts = [{
  fnt: '../fonts/cjk_0.fnt',
  png: '../fonts/cjk_0_sdf.png'
}, {
  fnt: '../fonts/cjk_1.fnt',
  png: '../fonts/cjk_1_sdf.png'
}, {
  fnt: '../fonts/cjk_2.fnt',
  png: '../fonts/cjk_2_sdf.png'
}];

const font = OVRUI.loadFont();

function init(bundle, parent, options) {
  let count = 0;

  fallbackFonts.forEach((fontPaths) => {
    count += 1;

    OVRUI.loadFont(fontPaths.fnt, fontPaths.png).then((fallbackFont) => {
      OVRUI.addFontFallback(font, fallbackFont);
      count -= 1;

      if (count === 0) {
        const vr = new VRInstance(bundle, 'VRTEST', parent, {
          font: font,
          ...options,
        });

        vr.render = function() {};
        vr.start();
      }
    });
  });
}

window.ReactVR = {init};

使用的资源：

于 2017-07-01T16:22:53.450 回答