拉伸高度以适应本机反应中的内容

Posted 2023-02-22

【中文标题】拉伸高度以适应本机反应中的内容

【英文标题】：Stretch height to fit content in react native

【发布时间】：2017-09-19 23:22:50

【问题描述】：

我想更改模态框的高度以适应内容。它总是刚好到达屏幕的高度：

jsx:

  <Modal style=styles.modal
    isVisible=props.categories.some(x => showModal(x))>
    <Container style=styles.modalView>
      <Header style=styles.header>
        <Left>
          <Title 
            style=styles.title>getDisplayedCategoryLabel(props.categories)
          </Title>
        </Left>
        <Right>
          <Button 
            small 
            transparent 
            danger 
            rounded 
            icon 
            onPress=() => props.setAllShowSubcategoriesToFalse()>
            <Icon name="times" size=20 color='#9E9E9E' />
          </Button>
        </Right>
      </Header>
      <Content >
        <SelectMultiple
          labelStyle=styles.label
          items=getDisplaySubcategories(props.categories)
          selectedItems=
            props.categories.filter(category => category.selected)
          
          onSelectionsChange=props.toggleSubcategory />
      </Content>
    </Container>
  </Modal>

风格：

    const styles = 
  modalView: 
    flex: 1,
    backgroundColor: '#FFFFFF',
    padding: 20,
    borderRadius: 8,
    height: 100
  ,
  modal: 
    padding: 10,
    height: 100
  
    

改变modal 样式的高度没有任何作用。我似乎根本无法改变高度。我应该怎么做才能影响高度？

我正在使用react-native-modal

【问题讨论】：

你找到解决这个问题的办法了吗？

有什么解决办法吗？

【参考方案1】：

怎么样：

 <Modal transparent>
   <View style= flex: 1, alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' >

     /* fill space at the top */
     <View style= flex: 1, justifyContent: 'flex-start'  />


     <View style= flex: 1, backgroundColor: 'white' >
       /* content goes here */
     </View>

     /* fill space at the bottom*/
     <View style= flex: 1, justifyContent: 'flex-end'  />
   </View>
 </Modal>

【参考方案2】：

这只是一个猜测，但你给paddingTop 一个值0 看看效果如何。删除您拥有的通用 padding 并根据您想要实现的样式使用 paddingLeft, paddingRight, paddingBottom 精确指定它。

希望对你有所帮助