Substantiation of content in the view

I want to have a view with a part (with three lines of text wrapped in a View) aligned to the left and a part (with an image in the view) as follows:

+-----------+ | | | | | A | | B | | | | | +-----------+ 

I have a style for the main view:

 Tab: { flexDirection: 'row', flex: 1, justifyContent: 'space-between', backgroundColor: '#F5FCFF', padding:5, borderWidth:1, } 

but what he does is

 +-----------+ | || | | | A || B | | | || | | +-----------+ 

I tried to align myself and justifyContent for a flexible end for B, played a little, but I can’t even get the whole thing to bring it into line.

(Maybe the problem with these tabs is because they are in a list view? Will it affect them?)

Question: how do I get components to listen for alignment and alignment of properties?

+4
source share
2 answers

I achieved what I wanted (of type) with the addition of a constant width in the tab style:

 Tab: { flexDirection: 'row', flex: 1, width:200, justifyContent: 'space-between', backgroundColor: '#F5FCFF', padding:5, borderWidth:1, } 
+4
source

This worked for me:

 Tab: { flexDirection: 'row' ... justifyContent: 'space-between' } TextContainer: { flex: 1 } 

The important part is to provide the views (A, B and empty) inside the all flex: 1 tab to make sure they all have the same width. justifyContent: space-between for a tab is optional, but not painful. This should create three equal sections.

+4
source

All Articles