Structure 2D Content like Images and Text Using the View Component in React VR
Same as a <div> in HTML or a <View/> in ReactNative, React VR comes with a <Container/> component that supports flexbox layouting.
In this lesson we'll explore what a <View/> means in a three dimensional context and how to structure two dimensional content like text and images.
[00:00] Our goal in this session is to structure the line images and text as you can see on the right side. To get started, we refresh the browser and add a Vue component. A Vue component is a container with no visual impact by default, and it can be used to wrap 3D objects like the panel in this scene, but also 2D content.
[00:20] To demonstrate this, let's add a Vue with the following style attributes, width of 2 meters, height of 2.4 meters, background color white, layered origin with the value 05 and 05, and translated to be positioned 3 meters in front of us.
[00:45] As you can see, we now have a white plane available to be filled with 2D content like an image, video, or text. Let's add the first image. To do so, we add the image component, and add a source referencing a photo of mountains. Just to keep in mind, I added this picture to the static assets folder beforehand.
[01:05] In addition, we provide a height of 1.2 meters. As you can see, the image is rendered inside the Vue. Next up, we want to add the text. You won't see anything since the default text is white. We change it to be gray, reduce the font size, and sent it right away.
[01:32] As you can see, the text is now available in our Vue. Naturally, the content will flow into the next line. The missing piece now is the row of thumbnails at the bottom. Since this is one item, we're going to wrap the images in a Vue, and then add two images.
[01:59] As you can see, they naturally flow vertically. Since the Vue component supports Flexbox, we can leverage the Flexbox feature flex-direction and set it to row. Voila, our font is aligned horizontally now. Let's add the missing images, and we're almost done.
[02:20] Before we conclude this lesson, let's make sure the content is nicely aligned. Therefore, we go back to a style property of the Vue component wrapping our content, and set justify content to space between, yet another cool Flexbox feature to make it look nice.