css - 全宽网页视图 Reactvr

Question

我正在使用 ReactVr 框架来处理一个项目。我的主要目标是设置多个热点，单击它时应显示全角显示，顶部有一个十字按钮以关闭查看器。这是我到目前为止所做的。

我创建了一个条件，如果 infoText 为真，则显示该框，否则显示 infoButton.png：

<VrButton onClick={this.toggleDisplayText}>
      {this.state.infoText === true?
      (
        <View
        style = {{
          position: 'absolute',
          height: 2,
          width: 3,
          backgroundColor: '#000',
          opacity: 0.5,
          flex: 2, // for two columns in the box
          flexDirection: 'column', //specifying column or row
          justifyContent: 'space-between', //justify space between the objects.
          layoutOrigin: [0.7, 0.7],
          transform: [{translate: [0.6, -0.7, -2.5]}]
        }}
          >
        <Text
        style = {{
          width: 1,
          fontSize: 0.18,
          marginLeft: 1.9,
          marginTop: 0.2,
          fontWeight: '300',
          textAlign: 'left',
        }}>
        This bag is the most precious bag in the world. You will love this bag.
        </Text>
          <Image source = {asset('004.png')}
          style =
          {{
          position: 'absolute',
          width: 1.8,
          height: 1.8,
          opacity: 2,
        }}
         />
        </View>

在上面的代码中，您可以看到它出现了一个带有信息和图像的文本框。要退出，我们可以用文本框区域点击关闭。相反，我正在寻找全宽的浏览器和顶部的十字来关闭。我尝试使用 Flex: 1 和 alignItem: 'strected' 但没有产生任何结果。如果有人能就这个问题提出一个想法，我将不胜感激。

非常感谢。

标签： cssreact-360