Question

我已使用Content来实现垂直滚动，并尝试使用ScrollView。但是没有任何东西适用于原生基础中的Card组件。在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>
    );
}

有什么想法吗？感谢

Answer 1

我的一个项目遇到了同样的问题。我意识到即使将<Card>放在<ScrollView>中也不会滚动<Container>，因为它在<Card>内。我通过在<ScrollView>中使用render() { return ( <ScrollView> <Card> <CardItem> </CardItem> </Card> </ScrollView> ); }创建一个单独的Component并将其导入来解决了该问题。

示例：

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

            <ScrollingCardExample />

          </Content>
        </Container>
    );
  }

导入：

#include<stdio.h>
#include<string.h>

void main()
{
    char file[60];          // will store file name
    printf("Enter file name: ");
    fgets(file, 59, stdin);

    FILE *fp = fopen(file, "a+");   // open file in append mode

    if(fp == NULL){
        printf("File not found !");
        return;
    }

    char data[100];
    printf("Enter some data to add to file(exit to terminate): ");
    fgets(data, 99, stdin);

    int flag = strcmp(data, "exit");

    while(flag != 0){
        fputs(data, fp);

        fgets(data, 59, stdin);
        flag = strcmp(data, "exit");
        printf("%d\n", flag);       // for checking whether string are correctly comapred or not
    }

    printf("Bye");

}

Answer 2

使用<ScrollView>代替<Content>，并确保您有足够的内容来测试滚动。

Answer 3

尝试使用一些数据代码。对我来说很好。

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

Answer 4

将flexGrow: 1组件的contentContainerStyle设置为Content的道具：

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

经过许多小时的努力，这对我有用。

Vertical Scroll不适用于Android的原生基础卡

4 个答案: