如何在react vr中使用utf-8？

Question

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);

Answer 1

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

对于日语，这是比较简单的，因为你只需要加载一种字体。只需使用OVRUI中的loadFont方法，将其指向您的字体文件，并在创建它时将结果传递给您的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};

使用的资源：

• https://facebook.github.io/react-vr/docs/fonts.html
• https://html5experts.jp/karad5/23543/
• https://github.com/facebook/react-vr/issues/52