Question

每次我尝试使用原生基地官方网站上提供的代码运行程序时，我都无法使用原生基础套牌swiper我得到一个空白的白色屏幕。我的代码是： -

  <DeckSwiper
        dataSource={cards}
        renderItem={item =>
          <Card style={{ elevation: 3 }}>
            <CardItem>
              <Left>
                <Thumbnail source={item.image} />
                <Body>
                  <Text>{item.text}</Text>
                  <Text note>NativeBase</Text>
                </Body>
              </Left>
            </CardItem>
            <CardItem cardBody>
              <Image style={{ height: 300, flex: 1 }} source={item.image} />
            </CardItem>
            <CardItem>
              <Icon name="heart" style={{ color: '#ED4A6A' }} />
              <Text>{item.name}</Text>
            </CardItem>
          </Card>
        }
      />

没有显示错误，但我唯一得到的是一个白色的空白屏幕

Answer 1

将Deskwiper放置在视图内，并为该视图提供高度。它应该工作

    <View style={{height:400}}>
    <DeckSwiper
    dataSource={cards}
    renderItem={item =>
      <Card style={{ elevation: 3 }}>
        <CardItem>
          <Left>
            <Thumbnail source={item.image} />
            <Body>
              <Text>{item.text}</Text>
              <Text note>NativeBase</Text>
            </Body>
          </Left>
        </CardItem>
        <CardItem cardBody>
          <Image style={{ height: 300, flex: 1 }} source={item.image} />
        </CardItem>
        <CardItem>
          <Icon name="heart" style={{ color: '#ED4A6A' }} />
          <Text>{item.name}</Text>
        </CardItem>
      </Card>
    }
  />
  </View>

Answer 2

寻找有关此问题的答案的人请记住，本机文档中的示例使用内部资源来存储图像。因此，如果您将外部资源用于图片组件（例如图片网址），请使用

<Image style={{ height: 300, flex: 1 }} source={{uri:item.image}} />

相反。这是最基本的，但是很容易被忽略。

如何使用Native base Deck swiper for android

2 个答案: