设置textarea高度以占据屏幕的其余部分

时间:2019-04-23 03:31:56

标签: react-native native-base

我是本机反应的新手。构建一个Hello World应用程序,以使自己对react-native有所了解。在屏幕上,我想要一个文本框,在其下方有一个按钮,在该按钮下有一个文本区域,它将占据屏幕的其余部分。我不确定该怎么做。

1 个答案:

答案 0 :(得分:2)

您必须了解Flex Box才能根据需要设置布局。

使用弹性框的布局

  

组件可以使用flexbox指定其子级的布局   算法。 Flexbox旨在在以下位置提供一致的布局   不同的屏幕尺寸。

     

您通常会结合使用flexDirectionalignItems,   和justifyContent以获得正确的布局。

     

弹性方向

     

将flexDirection添加到组件的样式确定主要   其布局的轴。孩子们应该横向组织吗   (行)或垂直(列)?默认值为列。

     

合理化内容

     

将justifyContent添加到组件的样式将确定   沿主轴分布的儿童。孩子应该   分布在开始,中心,末端还是均匀分布?   可用选项包括弹性开始,居中,弹性结束,空格,   间隔和空间均匀。

     

对齐项目

     

将alignItems添加到组件的样式可以确定的对齐方式   沿辅助轴的子级(如果主轴为行,则   第二个是列,反之亦然)。孩子应该对齐吗   在开始,居中,结束还是拉长来填充?可用的   选项包括弹性开始,居中,弹性结束和拉伸。

请检查此链接以了解flexbox:

  1. Understading flexbox in react native
  2. Layout with flexbox