Вертикальная прокрутка не работает с картой в native-base для Android - PullRequest
Новая
       92

Вертикальная прокрутка не работает с картой в native-base для Android

0 голосов
/ 08 июня 2018

Я использовал Content для достижения вертикальной прокрутки и пробовал также использовать ScrollView.Но ничего не работает с Card компонентом в native-base.Такое поведение было показано при тестировании в эмуляторе Android.

Следую за моей работой, 

render() {
    return (
        <Container>
            <Header style={{backgroundColor: Colors.headerBackground, justifyContent: 'center', marginTop: '4%'}}>
                <Left>
                    <Button transparent onPress={this.handleBackButtonClick} small={true}>
                        <Icon name='arrow-back' size={30} color={Colors.textWhite}/>
                    </Button>
                </Left>
                <Body>
                <Title style={{
                    fontSize: 20,
                    fontWeight: '200'
                }}>Events</Title>
                </Body>
            </Header>
                <Content>
                    { (this.state.events).map(event => { return (
                    <Card key={event.title} style={{ marginTop:'2%', marginLeft:'2%', marginRight:'2%', marginBottom:'2%'}}>
                        <CardItem>
                            <Image source={{uri:event.uri}}
                                   style={{height:200, width: null, flex:1}}/>
                        </CardItem>
                        <CardItem>
                            <Left>
                                <View style={{height: '50%'}}>
                                    <Text style={{color: Colors.calenderMonth, fontSize: 15}}>Jun</Text>
                                    <Text style={{fontSize: 15}}>15</Text>
                                </View>
                            </Left>
                            <Body style={{alignSelf: 'flex-start', marginLeft: '-50%'}}>
                            <Text style={{fontSize: 20, fontWeight: 'bold'}}>{event.title}</Text>
                            <Text note>{event.desc}</Text>
                            </Body>
                        </CardItem>
                    </Card>
                    ) } ) }
                </Content>
        </Container>
    );
}

Есть идеи?Спасибо

Ответы [ 4 ]

0 голосов
/ 27 декабря 2018

Установите flexGrow: 1 в contentContainerStyle опору Content компонента: 

<Content contentContainerStyle={{ flexGrow: 1 }}>

Это сработало для меня после многих часов борьбы с проблемой.

0 голосов
/ 14 июня 2018

попробовал ваш код с некоторыми данными.Работает нормально для меня. 

import React, { Component } from 'react';
import { Image } from "react-native";
import { Container, Header, Left, Body, Button, Icon, Title, Content, Card, CardItem, View, Text } from 'native-base';

export default class App extends Component {

  state = { events: [1, 2, 3, 4, 5] }

  render() {
    return (
      <Container>
        <Header style={{ justifyContent: 'center', marginTop: '4%' }}>
          <Left>
            <Button transparent onPress={this.handleBackButtonClick} small={true}>
              <Icon name='arrow-back' size={30} color="white" />
            </Button>
          </Left>
          <Body>
            <Title style={{
              fontSize: 20,
              fontWeight: '200'
            }}>Events</Title>
          </Body>
        </Header>
        <Content>
          {(this.state.events).map(event => {
            return (
              <Card key={event} style={{ marginTop: '2%', marginLeft: '2%', marginRight: '2%', marginBottom: '2%' }}>
                <CardItem>
                  <Image source={{ uri: "https://nativebase.io/assets/img/front-page-icon.png" }}
                    style={{ height: 200, width: null, flex: 1 }} />
                </CardItem>
                <CardItem>
                  <Left>
                    <View style={{ height: '50%' }}>
                      <Text style={{ fontSize: 15 }}>Jun</Text>
                      <Text style={{ fontSize: 15 }}>15</Text>
                    </View>
                  </Left>
                  <Body style={{ alignSelf: 'flex-start', marginLeft: '-50%' }}>
                    <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Title</Text>
                    <Text note>Description</Text>
                  </Body>
                </CardItem>
              </Card>
            )
          })}
        </Content>
      </Container>
    );
  }
}

Gif

enter image description here

0 голосов
/ 08 ноября 2018

У меня была такая же проблема с одним из моих проектов.Я понимаю, что <Card> не прокручивался даже после того, как я поместил его в <ScrollView>, потому что он был внутри <Container>.Я решил это, создав отдельный компонент с <Card> в <ScrollView> и импортировав его.

Пример: 

    render() {
    return (
        <ScrollView>
          <Card>
            <CardItem>
            </CardItem>
          </Card>
        </ScrollView>
    );
  }

Импортируйте его: 

 render() {
    return (
        <Container>
          <Content>

            <ScrollingCardExample />

          </Content>
        </Container>
    );
  }
0 голосов
/ 08 июня 2018

Используйте <ScrollView> вместо <Content> и убедитесь, что у вас достаточно содержимого для проверки прокрутки.

...