ascoders / react-native-image-viewer

🚀 tiny & fast lib for react native image viewer pan and zoom
MIT License
2.45k stars 580 forks source link

我这样加载怎么是黑屏,加载示例的图片没问题 #454

Open yuanxiaodong1 opened 3 years ago

yuanxiaodong1 commented 3 years ago

import React from 'react'; import { View, TouchableOpacity, StyleSheet,Text,Image,FlatList,Modal } from 'react-native'; // import RefreshListView, { RefreshState } from 'react-native-refresh-list-view'; // import { Toast } from 'teaset'; // import http from '../../../../util/Http'; // import { cleanObj,transDateTime1 } from '../../../../util/CommonUtils'; // import { Api,successCode } from '../../../../constant/Api'; // import Constants from '../../../../constant/Constants'; // import LinearGradient from 'react-native-linear-gradient'; import { isIphoneX, screenW } from '../../../../util/ScreenUtil'; import ImageViewer from 'react-native-image-zoom-viewer'; export default class ApplyPicDetail extends React.Component{ constructor(props){ super(props); this.picList = this.props.navigation.getParam('picList',''); this.state = { agreeVisible: false,//是否显示弹框 }; } componentDidMount = () => {

}

setAgreeVisiblee = (value) => { this.setState({ agreeVisible: true,

});

}

setAgreeVisiblee1 = (value) => { this.setState({ agreeVisible: false,

});

} renderCell(item){

console.log('图片2张',({url: `data:image/png;base64,${item.item}`}));

return (
  <View style={{ marginLeft:(item.index + 1) % 2 === 0 ? 10 : 0,marginTop:item.index > 1 ? 10 : 0 }}>
    <TouchableOpacity onPress={() => this.setAgreeVisiblee(true)}>
      <Image style={{ width:(screenW - 10) / 2,height:(screenW - 10) / 2 }} resizeMode="cover"
        source={{ uri: `data:image/png;base64,${item.item}` }}
      />
    </TouchableOpacity>

  </View>
);

}

render(){

console.log('图片几张',this.picList.map);
console.log('图片1张',this.picList);

// console.log('图片2张',({url: `data:image/png;base64,${item.item}`}));

// this.picList.map

const images = [{

  url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',

  props: {

  }

},

]

return (

  <View style={{ flex:1,backgroundColor:'#FFFFFF' }}>
    <FlatList
      style={{ flex:1,backgroundColor:'#FFFFFF' }}
      data= {this.picList}
      numColumns={2}
      keyExtractor={(item,index) => index + 'ApplyPicDetailCell'}
      renderItem={this.renderCell.bind(this)}
    />

   <Modal visible={this.state.agreeVisible} transparent={true}  

  //  onRequestClose={() => { this.setAgreeVisiblee1(false); }} 
   >
             {/* <ImageViewer  onClick ={() => this.setAgreeVisiblee1(false)} imageUrls={images}/> */}
            <ImageViewer  
            onClick ={() => this.setAgreeVisiblee1(false)}

            imageUrls={ this.picList.map((item) => ({url: `data:image/png;base64,${item.item}`,width:200,height:200})) }

            // imageUrls={this.picList.map((item) => ({url: item.item}))}
            />
  </Modal>

  </View>
);

} }