layout - Reactive Native: place view bellow another centered view -


i used lot using android relative layouts:

 +-----------+   |           |<- parent view  |           |  |  +-----+  |  |  |     | <--- centered   |  |     |  |   child view  |  +-----+  |  |   [xxx] <---- view positioned  |           |   bellow centered  +-----------+   child view 

is possible achieve same in react-native?

i did similar today this:

                <view style={{ flex: 1 }}>                     <view style={{                         height: 350,                          backgroundcolor: "blue"                     }}>                      <view style={{                         backgroundcolor: "red",                          height: 100,                          width: 100,                          position: "absolute",                          top: "50%",                          left: "50%",                          marginleft: -50, // half width of child                         margintop: -50 // half height of child                     }}>                         <text>hello...</text>                     </view>                      <view style={{                          backgroundcolor: "green",                          height: 30,                          width: 100,                          position: "absolute",                          top: "50%",                          left: "50%",                          marginleft: -50, // half width of child                         margintop: 70 // controls how far down center child                     }}>                         <text>...world</text>                     </view>                 </view> 

this require know size of elements inside parent can correctly set marginleft , margintop values on children.


Comments

Popular posts from this blog

How to understand 2 main() functions after using uftrace to profile the C++ program? -

c# - Update a combobox from a presenter (MVP) -

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -