使用视差图像时不显示图像（反应本机快照轮播）

Question

我在使用ParallaxImage（react-native-snap-carousel lib）显示图像时遇到问题。请任何人能帮助我。 提交我的项目的截止日期是2018年10月30日。 谢谢大家

https://uphinhnhanh.com/images/2018/10/17/AnhchupManhinh2018-10-17luc15.53.17.png https://uphinhnhanh.com/images/2018/10/17/AnhchupManhinh2018-10-17luc15.53.22.png https://uphinhnhanh.com/images/2018/10/17/AnhchupManhinh2018-10-17luc15.53.28.png

/* @flow */

import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Text,
} from 'react-native';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import Carousel,{Pagination, ParallaxImage} from 'react-native-snap-carousel';

export default class Activity extends React.Component {
  constructor() {
    super()
    this.state = {
      entries: [
        {
        title: 'Sắp diễn ra',
        images: '../assets/images/lgdoan.png',
        },
        {
        title: 'Đang diễn ra',
        images: '../assets/images/1.jpg'
        },
        {
        title: 'Đã diễn ra',
        images: '../assets/images/2.jpg'
        },
      ],
    }
  }
  _renderItem ({item, index}, parallaxProps) {
    return (
      <View style={styles.container}>
          <Text numberOfLines={2}>{ item.title }</Text>
          <ParallaxImage
              source={{ uri: item.images }}
              style={styles.image}
              parallaxFactor={0.4}
              {...parallaxProps}
          />
      </View>
  );}
  get pagination () {
        const { entries, activeSlide } = this.state;
        return (
            <Pagination
              dotsLength={entries.length}
              activeDotIndex={activeSlide}
              dotStyle={{
                  width: hp('1%'),
                  height: hp('1%'),
                  borderRadius: hp('0.5%'),
                  marginHorizontal: 8,
                  backgroundColor: 'black',
                  marginBottom: hp('2%'),
              }}
              inactiveDotStyle={{

              }}
              inactiveDotOpacity={0.4}
              inactiveDotScale={0.6}
            />
        );
    }
  render () {
    return (
      <View style = {styles.container}>
        <Carousel
          ref={(c) => { this._carousel = c; }}
          data={this.state.entries}
          renderItem={this._renderItem}
          sliderWidth={wp('100%')}
          itemWidth={wp('50%')}
          inactiveSlideScale={0.8}
          inactiveSlideOpacity={0.2}
          onSnapToItem={(index) => this.setState({ activeSlide: index })}
          hasParallaxImages={true}
          firstItem={(this.props, 'index', 1)}
          />
          { this.pagination }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  carousel: {
    justifyContent: 'center',
    backgroundColor: 'red',
  },
});

Answer 1

要在React中加载图像，您需要导入图像或使用require

import image1 from  '../assets/images/lgdoan.png';
import image2 from '../assets/images/1.jpg';
import image3 from '../assets/images/2.jpg';

this.state = {
  entries: [
    {
    title: 'Sắp diễn ra',
    images: image1
    },
    {
    title: 'Đang diễn ra',
    images: image2
    },
    {
    title: 'Đã diễn ra',
    images: image3
    },
  ],
}

或直接使用require

 this.state = {
  entries: [
    {
    title: 'Sắp diễn ra',
    images: require('../assets/images/lgdoan.png'),
    },
    {
    title: 'Đang diễn ra',
    images: require('../assets/images/1.jpg'),
    },
    {
    title: 'Đã diễn ra',
    images: require('../assets/images/2.jpg')
    },
  ],
}