![]() ![]() For example if we want to center our components horizontally and vertically, we will need to apply the following changes to our styles.įirst we set the flex direction to row, this will arrange the children horizontally. stretch will set the height or width to 100% of the container, based on the flex direction. ![]() flex-end which will align the component to the bottom/end of the parent container.ģ. flex-start which will align the component at the top/start of the parent component.Ģ. We have three more options to align our component.ġ. This is a very important concept to keep in mind. On the other hand, if we set the flex direction to row, the component will be vertically centered. Therefore the component is horizontally centered. Because we didn’t define a flex direction, the column direction is used. This will automatically center the component on the screen. Aligning components in React is very straightforward, all we need to do is define the alignItems property in the container’s styles. Now that we have a component, we can start playing around with the alignment. As a result we should have something as in the following image. These is a pretty common styles, just some colors, paddings, fonts and so on. Once we have the component rendered, we need to add some styles to the stylesheet object. We only have the title, and the content is completely static. It’s important to notice that we are adding just the code between the comments, the toolbar code was defined before in the flexDirection tutorial. In the previous code we’ve defined a message box container. This is just a dummy sample it will help us to see the alignment in action. We will create a container that displays a message with a title, we will learn how to align this component.įirst we need to create the required views and texts, open the tab in your favorite text editor and add the following code to the render method, as a child of the content view. Now that we have a better understanding of flex direction, let’s review the alignment options that we have available. I recommend that you read the previous tutorial about how flexDirection works as we will continue using the same project that we created in the first tutorial. This tutorial is part of a series, in which we are learning all about the layout system in React Native. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |