Unable to show image on FlatGrid

[deepakkumarchauhan]

I am unable to show image under FlatGrid. If I pass static image then It will show but from array I am unable to get image.

Please help its urgent.

[liukefu2050]

Sorry ,I don't understand why you can't get pictures from arrays. example: `import React from 'react'; import { StyleSheet, View, Text, TouchableOpacity, TouchableHighlight, Modal, Platform, Image, } from 'react-native'; import ImageViewer from 'react-native-image-zoom-viewer'; import _ from 'lodash'; import SudokuGrid from './SudokuGrid'; import ProgressiveImage from './ProgressiveImage';

export default class ImageGrid extends React.Component { constructor(props) { super(props); this.state = { modalVisible: false }; } _setModalVisible(visible) { this.setState({modalVisible: visible}); }

renderRow = (image, index, list) => {
    return (
    <TouchableHighlight underlayColor={'#eee'} onPress={() => {this._setModalVisible(true)}}>
        <View style={{ overflow: 'hidden',flexDirection: 'row',
                      justifyContent: 'center', alignItems: 'center'}}>
            {
                image && image.width ? <Image source={image} style={styles.itemImageStyle}/>:
                    <ProgressiveImage
                        thumbnailSource={{ uri: 'http://i.imgur.com/O249H4P.png?bust' + Math.random() }}
                        imageSource={{ uri: image.uri}}
                        style={styles.itemImageStyle}
                        resizeMode="cover"
                    />
              }
        </View>
    </TouchableHighlight>
    );
}
render() {
    const {images} = this.props;
    let imagesTemp = [];
    _.each(images,function (image) {
        var temp = {
            url:image.uri
        }
        if(image.width){
            temp.width = image.width
        }
        if(image.height){
            temp.height = image.height
        }
        imagesTemp.push(temp);
    });
    return (
        <View>
            {
                images && images.length>0 &&
                    <SudokuGrid
                        containerStyle={{ backgroundColor: '#fff'}}
                        columnCount={3}
                        dataSource={images}
                        renderCell={this.renderRow}
                    />
            }
            {
                imagesTemp && imagesTemp.length>0 &&
                <Modal
                    transparent={false}
                    visible={this.state.modalVisible}
                    onRequestClose={() => {this._setModalVisible(false)}}>
                    <ImageViewer imageUrls={imagesTemp}/>
                </Modal>
            }
        </View>
    )
}

}`

[liukefu2050]

import { View, ViewPropTypes, StyleSheet, Dimensions, } from 'react-native'

import PropTypes from 'prop-types';

const { width: deviceWidth } = Dimensions.get('window'); const styles = StyleSheet.create({ container: { flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start', flexWrap: 'wrap', }, })

export default class SudokuGrid extends Component {

static propTypes = { rowWidth: PropTypes.number, columnCount: PropTypes.number.isRequired, dataSource: PropTypes.array.isRequired, renderCell: PropTypes.func.isRequired, style: ViewPropTypes.style, }

// 构造 constructor(props) { super(props) // 初始状态 this.state = {}

  this._columnWidth = (props.rowWidth || deviceWidth) / props.columnCount
}

render() { return ( <View style={[this.props.style, styles.container, {width: this.props.rowWidth,}]}> {this._renderCells()} ) }

_renderCells() { return this.props.dataSource.map((data, index, dataList) => { return ( <View style={{width: this._columnWidth, }} key={cell-${(data.key != null) ? data.key : index}}> {this.props.renderCell(data, index, dataList)} ) }) }

}

[liukefu2050]

import React, { Component } from 'react' import { Animated, View, Image, StyleSheet } from 'react-native' import PropTypes from 'prop-types'; export default class ProgressiveImage extends Component { constructor(props) { super(props) this.state = { imageOpacity: new Animated.Value(0), thumbnailOpacity: new Animated.Value(0), } }

onLoadThumbnail() {
    Animated.timing(this.state.thumbnailOpacity, {
        toValue: 1,
        duration: this.props.thumbnailFadeDuration,
    }).start()
    this.props.onLoadThumbnail()
}

onLoadImage() {
    Animated.timing(this.state.imageOpacity, {
        toValue: 1,
        duration: this.props.imageFadeDuration,
    }).start()
    this.props.onLoadImage()
}

render() {
    return (
        <View style={this.props.style}>
            <Image
                resizeMode={this.props.resizeMode}
                style={[styles.image, this.props.style]}
                source={this.props.placeHolderSource}
            />
            {this.props.thumbnailSource &&
            <Animated.Image
                resizeMode={this.props.resizeMode}
                style={[styles.image, { opacity: this.state.thumbnailOpacity }, this.props.style]}
                source={this.props.thumbnailSource}
                onLoad={() => this.onLoadThumbnail()}
                blurRadius={this.props.thumbnailBlurRadius}
            />
            }
            <Animated.Image
                resizeMode={this.props.resizeMode}
                style={[styles.image, { opacity: this.state.imageOpacity }, this.props.style]}
                source={this.props.imageSource}
                onLoad={() => this.onLoadImage()}
            />
        </View>
    )
}

}

const styles = StyleSheet.create({ image: { position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, }, })

ProgressiveImage.propTypes = { placeHolderColor: PropTypes.string, placeHolderSource: PropTypes.number, imageSource: PropTypes.object.isRequired, imageFadeDuration: PropTypes.number.isRequired, onLoadThumbnail: PropTypes.func.isRequired, onLoadImage: PropTypes.func.isRequired, thumbnailSource: PropTypes.object, thumbnailFadeDuration: PropTypes.number.isRequired, thumbnailBlurRadius: PropTypes.number, resizeMode: PropTypes.string.isRequired }

ProgressiveImage.defaultProps = { thumbnailFadeDuration: 250, imageFadeDuration: 250, thumbnailBlurRadius: 5, onLoadThumbnail: Function.prototype, onLoadImage: Function.prototype, resizeMode: 'cover' }

[liukefu2050]

import React, {Component} from 'react'; import { StyleSheet, Text, TextInput, View, Image, ScrollView, TouchableOpacity, TouchableHighlight, InteractionManager, NativeModules, Dimensions } from 'react-native'; import Toast from 'react-native-root-toast'; import Header from '../components/Header'; import {newsAdd} from '../actions/newsActions'; import ImageGrid from '../components/ImageGrid' import ImagePicker from 'react-native-customized-image-picker'; import as c from '../common/constants'; import as CommonUtils from '../common/CommonUtils';

let userId = null; export default class NewsAddPage extends Component { constructor(props) { super(props); this.state = { images: [] }; }

render() {
    return (
        <View style={styles.container}>
            <Header
                leftIcon='angle-left'
                leftIconAction={()=>this.props.navigator.pop()}
                title='发表动态'
                rightButton="确定"
                rightButtonAction={()=>this.send()}
            />

            <ImageGrid {...this.state} />
            <TouchableHighlight underlayColor={'#eee'} onPress={this.pickMultiple.bind(this)}>
                <Image source={require('../images/im_plus_btn_normal.png')}/>
            </TouchableHighlight>
        </View>
    )
}

pickMultiple() {
    ImagePicker.openPicker({
        multiple: true,
        isCamera: true,
        includeBase64:true,
        compressQuality:c.compressQualityNews
    }).then(images => {
        this.setState({
            images: images.map(i => {
                return {uri: i.path, width: i.width, height: i.height, mime: i.mime};
            })
        });
    }).catch(e => {
        CommonUtils.alert("图片有问题，发生未知错误！");
    });
}

}

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F4F3F3' }, textInputContainer: { marginTop: 20, marginLeft: 10, marginRight: 10, backgroundColor: 'white' }, contentInput: { height: 100, borderColor: 'green', borderWidth: 1, fontSize: 14 }, button: { width: 200, margin: 10, paddingTop: 15, paddingBottom: 15, color: '#fff', textAlign: 'center', backgroundColor: 'blue' } });