На клавиатуре открыт: модал режет вниз и кажется плохим, не знаю почему - PullRequest
Новая
       17

На клавиатуре открыт: модал режет вниз и кажется плохим, не знаю почему

0 голосов
/ 08 мая 2019

Я использую Modal из react-native-modal библиотеки.Модал открывался в полноэкранном режиме, поэтому я сделал marginVertical: 280, чтобы отобразить модал на половинном экране, но проблема в том, что когда клавиатура открывается, модальные сокращения вниз и выглядят очень плохо.Вот несколько скриншотов:

Без открытой клавиатуры:
Click to see screenshot of without open keyboard

С открытой клавиатурой:
Click to see screenshot of when keyboard opens

Вот код:
app.js 

import Modal from "react-native-modal";
import { Container, Content, Item, Input, Text, Button, Icon } from 'native-base';
import { Grid, Col } from 'react-native-easy-grid';

class VansFilterModal extends Component {

  getFilterModal() {
    return (
      <Container style={styles.modal}>
        <Grid>
          <Col style={{ width: '7%' }}>
            <Icon name="dot-circle-o" type="FontAwesome" />
          </Col>
          <Col style={{ width: '75%' }}>
            <Item rounded>
              <Input
                value={values.pickupLocation}
                onChangeText={handleChange('pickupLocation')}
                placeholder="Pick up location"
              />
            </Item>
          </Col>
        </Grid>
      </Container>
    )
  }

  render() {
    const filterModal = this.getFilterModal();
    const { visibleVansFilter, hideVansFilter } = this.props;
    return (
      <View>
        <Modal
          isVisible={visibleVansFilter}
          onBackdropPress={() => hideVansFilter()}
          style={styles.bottomModal}
        >
          {filterModal}
        </Modal>
      </View>
    )
  }
}

styles.js 

const styles = StyleSheet.create({
  modal: {
    padding: 10,
    backgroundColor: "white",
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
    borderColor: "#C0C0C0",
    borderWidth: 0.5,
    marginVertical: 180,
    marginTop: 0
  },
  bottomModal: {
    justifyContent: 'flex-end',
    margin: 0,
  }
});

1 Ответ

0 голосов
/ 08 мая 2019

Кажется, что это можно решить, установив фиксированное значение высоты, как указано здесь .Дайте мне знать, если это решило вашу проблему.

...