Как я могу использовать utf-8 в реакции vr?

Поддерживает ли 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);

react-360
person liyuechun    schedule 08.05.2017    source источник
comment
react-vr.org   -  person liyuechun    schedule 08.05.2017
comment
bbs.react-vr.org   -  person liyuechun    schedule 08.05.2017
comment
Попробуйте, и вы увидите.   -  person H. Pauwelyn    schedule 13.05.2017

Ответы (1)


arrow_upward
0
arrow_downward

По умолчанию ReactVR поддерживает только латинские и кириллические символы, для любых других типов символов вам придется загружать пользовательские шрифты. К счастью, в официальном репозитории уже есть готовые шрифты, просто они не публикуются как часть пакета npm. Вам придется вручную скопировать шрифты из здесь в ваш проект (скажем, под /fonts).

Для японского это проще, так как вам нужно загрузить только один шрифт. Просто используйте метод loadFont из 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};

Используемые ресурсы:

person Valentin    schedule 01.07.2017