Question

如何将react-native-swiper用于数组图像？

'use strict';
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  AsyncStorage,
  Alert,
  ListView,
  TouchableHighlight,
  Image,
  TextInput,
  Switch,
  View
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import {
  Container,
  Content,
  Body,
  List,
  ListItem,
  Card,
  CardItem,
  Icon,
  CheckBox,
} from 'native-base';
import Display from 'react-native-display';
import ViewPager from 'react-native-viewpager';
import ImageSlider from 'react-native-image-slider';
import Swiper from 'react-native-swiper';

export default class Detail_product extends Component {

  async componentWillMount() {

    const value = await AsyncStorage.getItem('url').then((value) => {
          this.setState({
            'url': value
          });
            console.log("URL is : " + this.state.url);
        }).done();
  }

  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      sent_to_web: this.props.sent_to_web,
      position: 1,
      interval: null,
    }
  }

  render() {
    console.log(this.props.gambar)
    let arr =[];
    let gambar = '';
    if(this.props.gambar.length == 0){
      arr.push(require('../../img/logo.png'))
      gambar = <Image style={styles.logo} source = {require('../../img/logo.png')}/>
    } else {
      for (let i =0; i <this.props.gambar.length; i++){      
        arr.push('http://'+this.state.url+this.props.gambar[i].url)
      }
        gambar = <Image style={styles.logo} source={{uris:[arr]}}/>
    }

    return (
      <Container>
        <Content>
          <View style={styles.containerfoto}>
               <Card>
                 <CardItem>
                   <View style={styles.logocontainer}>
                    <Swiper height={200} horizontal={true}>
                      {gambar}
                    </Swiper>
                   </View>
                 </CardItem>
              </Card>
          </View>
               <View style={styles.container}>
                <ListItem>
                 <Body>
                   <Text style={styles.titleListitem}>Barcode : </Text>
                   <Text note >{this.props.barcode}</Text>
                 </Body>
                </ListItem>
                <ListItem>
                 <Body>
                   <Text style={styles.titleListitem}>Nama Produk : </Text>
                   <Text note >{this.props.title}</Text>
                 </Body>
                </ListItem>
                <ListItem>
                 <Body>
                   <Text style={styles.titleListitem}>Merek : </Text>
                   <Text note >{this.props.nama_merek}</Text>
                 </Body>
                </ListItem>
                <ListItem>
                 <Body>
                   <Text style={styles.titleListitem}>Kategori : </Text>
                   <Text note >{this.props.kategori_nama}</Text>
                 </Body>
                </ListItem>
                <ListItem>
                 <Body>
                   <Text style={styles.titleListitem}>Satuan : </Text>
                   <Text note >{this.props.satuan}</Text>
                 </Body>
                </ListItem>
                <ListItem>
                 <Body>
                   <Text style={styles.titleListitem}>Harga Jual : </Text>
                   <Text note >{this.props.harga_jual}</Text>
                 </Body>
                </ListItem>
                <Display 
                  enable={this.state.sent_to_web} 
                  enterDuration={500} 
                  exitDuration={500}
                  exit="fadeOutRight"
                  enter="fadeInRight"
                  >
                  <ListItem>
                    <Body>
                      <Text style={styles.titleListitem}>Harga Jual Web : </Text>
                      <Text note >{this.props.harga_jual_web}</Text>
                    </Body>
                  </ListItem>
                </Display>
                <ListItem>
                  <Body>
                   <Text style={styles.titleListitem}>Discount : </Text>
                   <Text note >{this.props.harga_diskon.toString()}</Text>
                 </Body>
                </ListItem>
                <Display 
                  enable={this.state.sent_to_web} 
                  enterDuration={500} 
                  exitDuration={500}
                  exit="fadeOutRight"
                  enter="fadeInRight"
                  >
                  <ListItem>
                    <Body>
                      <Text style={styles.titleListitem}>Harga Diskon Web : </Text>
                      <Text note >{this.props.harga_diskon_web}</Text>
                    </Body>
                  </ListItem>
                </Display>
                 <ListItem>
                  <CheckBox
                    disabled={true}
                    checked={this.props.aktif}
                   />
                    <Text>  Aktif</Text>
                </ListItem>
                <ListItem>
                   <CheckBox
                    disabled={true}
                    checked={this.props.web}
                 />
                    <Text>  Sinkronisasi dengan Web</Text>
                </ListItem>
                <ListItem>
                   <CheckBox
                    disabled={true}
                    checked={this.props.katalog}
                 />
                    <Text>  Katalog</Text>
                </ListItem>
                <View>
            </View>
            </View>
        </Content>
      </Container>
    );
  }
  renderLoadingView() {
    return (
    <View style={{flex: 1}}>
      <View style={{backgroundColor: '#2db300', height: 45, alignSelf: 'stretch', flexDirection: 'row'}}>
        <Text>halooo</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({

  container:{
    paddingRight : 15,
  },
  containerfoto:{
    paddingTop: 38,
  },
  logocontainer:{
    flex:1,
    alignItems: 'center',
    paddingTop: 10,
    justifyContent: 'center',
  },
  logo:{
    width: 200,
    height : 200,
  },

    logogambar:{
    height : 200,
  },
  titleListitem:{
    fontSize:16,
    color : '#000',
    paddingBottom: 10,
  },
  loading: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    borderBottomWidth: 0.5,
    borderColor: '#7fc0e6'
  },
  fabs: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    bottom: 20,
    right:20,
  }

});

这是我的全部代码人，我是新的反应原生对不起，如果我的gramar英语那么糟糕

Answer 1

也许你可以试试：

renderPage(index){
    return (<Image style={styles.logo} source={this.props.gambar[index]}/>)
}

render() {
    const pagesCount = this.props.gambar.length;
    const gambar = [...new Array(pagesCount + 1)].map((it, idx) => {
         return this.renderPage(idx);
    });

    <Swiper height={200} horizontal={true}>
       {gambar}
    </Swiper>
}

反应原生swiper图像阵列

1 个答案: