web-dev-qa-db-ja.com

ReactNativeのコンテンツに合うように高さを伸ばす

モーダルの高さをコンテンツに合わせて変更したい。それは常に画面の高さになります：

enter image description here

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

javascriptcssreactjsreact-native
6
BeniaminoBaggins

次のようなものはどうですか？

 <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>
3
Dan Chenier

これは単なる推測ですが、paddingTopに0の値を指定して、それがどのように機能するかを確認してください。使用している汎用のpaddingを削除し、実現したいスタイルに応じてpaddingLeft, paddingRight, paddingBottomを使用して正確に指定します。

うまくいけば、それは少し役立つ

1
Chiamaka Nwolisa

親スタイルで最小の高さを設定し、特定の高さの後にスクロールする場合は、最大の高さを設定し、[表示]を[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>

0
Stephen Tapia