Question

我在反应原生应用中使用react-native-snap-carousel NPM包和NativeBase。我能够成功加载页面但旋转木马没有按预期显示子组件。 Carousel中的卡片渲染非常小（高度非常小，不清晰）

如果我在NativeBase的<ListItem>组件中使用卡片组件，那么这些卡片可以完美地使用，但是当在转盘组件下使用相同的卡片组件时，卡片会混乱。最有可能的是它与旋转木马儿童组件的风格有关。

这是Android上的旋转木马的样子（未在iOS上测试过）：

以下是代码。

BusinessCarousel.js

import React, { Component } from 'react';
import { Dimensions } from 'react-native';
import { Text, View } from 'native-base';
import Carousel from 'react-native-snap-carousel';
import BusinessCard from './card';

export class BusinessCarousel extends Component {
  _renderItem({ item, index }) {
    return <BusinessCard business={item} />;
  }

  render() {
    const businesses = [
      {
        name: 'business 1',
        details:
          'Business 1 details Business 1 details Business 1 details Business 1 details Business 1 details ',
        address: {
          fullAddress: 'some address'
        }
      },
      {
        name: 'business 2',
        details:
          'Business 1 details Business 1 details Business 1 details Business 1 details Business 1 details ',
        address: {
          fullAddress: 'some address'
        }
      },
      {
        name: 'business 3',
        details:
          'Business 1 details Business 1 details Business 1 details Business 1 details Business 1 details ',
        address: {
          fullAddress: 'some address'
        }
      }
    ];

    return (
        <Carousel
          ref={c => {
            this._carousel = c;
          }}
          data={businesses}
          renderItem={this._renderItem}
          sliderWidth={Dimensions.get('window').width}
          itemWidth={Dimensions.get('window').width * 0.8}
          containerCustomStyle={{ overflow: 'visible' }}
          contentContainerCustomStyle={{ overflow: 'visible' }}
        />
    );
  }
}

BusinessCard（card.js）

import React, { Component } from 'react';
import {
  Card,
  CardItem,
  Left,
  Right,
  Thumbnail,
  Image,
  Text,
  View,
  Button,
  Body,
  Icon
} from 'native-base';

export default class BusinessCard extends Component {
  _getLogoURL() {
    const { business } = this.props;
    if (business.logo && business.logo.url) return { uri: business.logo.url };
    return require('../../public/no-image-available.png');
  }

  render() {
    const { business } = this.props;
    return (
      <Card>
        <CardItem>
          <Left>
            <Thumbnail source={this._getLogoURL()} />
            <Body>
              <Text>{business.name}</Text>
              <Text note numberOfLines={1}>
                {(business.address && business.address.fullAddress) || ''}
              </Text>
            </Body>
          </Left>
          <Right>
            <Icon name="create" />
          </Right>
        </CardItem>
        <CardItem>
          <Body>
            <Text>{business.details}</Text>
          </Body>
        </CardItem>
      </Card>
    );
  }
}

React-Native-Snap-Carousel组件未正确显示

0 个答案: