반응 VR에서 utf-8은 어떻게 사용할 수 있습니까?

Question

React VR 지원 utf-8은 작동합니까? 예

: 기본 ReactVR으로

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

는 로마와 키릴 문자를 지원은 문자의 다른 유형에 대한 사용자 지정 글꼴에로드해야합니다. 운 좋게도 공식 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