2017-05-08 18 views
1

React VR支持utf-8嗎?如何在反應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); 
+0

http://react-vr.org – liyuechun

+0

HTTP://bbs.react-vr。 org – liyuechun

+1

嘗試一下,你會看到。 –

回答

0

默認情況下ReactVR只支持羅馬和斯拉夫字母,其他任何類型的字符,你會在自定義字體加載。 幸運的是,在官方倉庫中已經有預製字體,它們只是不作爲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}; 

資源使用: