反应 vr 边框不起作用答案

【问题标题】：react vr border not working反应 vr 边框不起作用
【发布时间】：2017-07-14 17:22:38
【问题描述】：

我想在我的文本周围加上一个边框。

    <View style={{ borderRadius: 1, borderWidth: 1, borderColor:'#FF0000',}}>
            <Text style={{
               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]}],
             }}>
              hello
             </Text>
          </View>

如果我将borderWidth 保留为1，我会看到hello 但我看不到边框。如果我将borderWidth 更改为10 之类的东西，我什么也看不到。如何为 hello 文本添加边框？

【问题讨论】：

你能创建一个 jsFiddle 吗？
我不知道如何把它放在 jsFiddle 但这里是 git 链接 github.com/lunzhang/react-vr-tetris 。您只需将 src/index.vr.js 中的代码替换为我发布的代码
遗憾的是，没有办法将 React VR 代码嵌入到任何流行的 Playground（codepen、jsbin 等）中，有人应该在 Github 上向开发人员报告这个问题 :)

标签： reactjs react-360

【解决方案1】：

边框确实有效，但默认情况下，您的视图位于场景的中心，即相机视图所在的位置。你真正想要做的是在你的根视图上设置 layoutOrigin，以及翻译，以便所有组件都在那里正确呈现。

应该这样做：

<View style={{ 
    borderRadius: 1, 
    borderWidth: 1, 
    borderColor:'#FF0000',
    transform: [{translate: [0, 0, -3]}],
    layoutOrigin: [0.5, 0.5],
}}>
    <Text style={{
        fontSize: 0.8,
        fontWeight: '400',
        paddingLeft: 0.2,
        paddingRight: 0.2,
        textAlign: 'center',
        textAlignVertical: 'center',
    }}>hello</Text>
</View>

这应该会在文本周围正确显示边框，尽管您会注意到边框的宽度太大，因为单位不是指像素，而是 3D 世界中的米。

【讨论】：