拉伸高度以適應 React Native 中的內容

Question

我想更改模式的高度以適應內容。 它總是剛好達到屏幕的高度：

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>

styles：

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

更改modal樣式的高度不會執行任何操作。 我似乎根本無法改變高度。 我應該做什么來影響身高？

我正在使用react-native-modal

Answer 1

這只是一個猜測，但你怎么給paddingTop一個值為0 ，看看它是如何工作的。 刪除您擁有的通用padding paddingLeft, paddingRight, paddingBottom根據您想要實現的樣式使用paddingLeft, paddingRight, paddingBottom完全指定它。

希望，這有點幫助

Answer 2

怎么樣的：

 <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>

Answer 3

在父樣式中設置最小高度，如果需要，在某個高度后滾動設置最大高度，並將View更改為ScrollView或FlatList。

<View style={{minHeight:100}}> <TouchableOpacity style={{height:150}}><Text>Touch me</Text> </TouchableOpacity></View>

要么

<ScrollView style={{maxHeight:"100%", flex:1}}>{somearray.map(item=>{<View> <Text>{item.someproperty}</Text></View>})}</ScrollView>