romreed/FileDownload.js

## FileDownload.js
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {
    Container,
    Header,
    Content,
    Card,
    CardItem,
    Thumbnail,
    Text,
    Button,
    Icon,
    Right,
    Left,
    ListItem,
    Body, Item, Input, Footer, Title
} from 'native-base';
import NewHeader from "../component/NewHeader"
import {Platform, View, FlatList, ImageBackground,TouchableOpacity,Image} from 'react-native'
import {height, widthScreen} from "../core/constantce";
import {openRoutTTDetails} from '../actions/navigate'
import {downloadFile} from '../actions/files'
import {loadLessons} from '../actions/lessons'
import RNFetchBlob from 'react-native-fetch-blob'
import {taskType} from "../core/status";
import {API_URL} from "../middleware/api";
import SpinerForAllScreen from "../component/SpinerForAllScreen"


class FileDownload extends Component {
    constructor(props) {
        super(props)
        this.state = {
            source: ""
        }
    }

    componentDidMount() {
        this.props.loadLessons();
    }

    pressing() {

        let dirs = RNFetchBlob.fs.dirs
        // console.log("dirs", dirs, RNFetchBlob.fs, RNFetchBlob.ios)
        RNFetchBlob
            .config({
                //path : RNFetchBlob.fs.dirs.DocumentDir + '/userThumbnails/test.jpeg',
                Authorization: 'Bearer access-token...',
                appendExt: 'jpeg',
                fileCache: true,
            })
            .fetch('GET', 'https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg', {
                'Cache-Control': 'no-store'
            })
            .then((res) => {
                res.path() // where the file is
                // console.log("res", res.path())
                if (Platform.OS === 'ios') {
                    RNFetchBlob.ios.openDocument(res.path()); // results in path/to/file.jpg
                }
                this.setState({
                    source: res.path()
                })
            })
            .catch((errorMessage, statusCode) => {
                console.log("error download", errorMessage, statusCode)
            })

    }

    render() {
        const {serverUrls, downloaded, lessons,isFetch}=this.props;
        console.log("serverUrls",serverUrls,downloaded,lessons)

        if (serverUrls.length === 0) {
            return (
                <Container>
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Icon primary name="flame" style={{fontSize: 80, color: "#369ad6"}}/>
                        <Text style={{fontSize: 20, color: "#369ad6"}}>Пока нет файлов</Text>
                    </View>
                </Container>
            )
        }

        return (
            <Container style={{backgroundColor: '#fff'}}>
                <NewHeader title="Обучение" navigation={this.props.navigation}/>
                <SpinerForAllScreen isFetch = {isFetch}/>

                {/*<Image source={{uri: 'file///data/user/0/com.asist.android/files/RNFetchBlobTmp_0h4tveiun5ujzias07c93.jpg'}}/>*/}

                {/*<View>*/}
                    {/*<Button full onPress={() => this.pressing()}><Text>Image</Text></Button>*/}
                {/*</View>*/}


                {/*<ImageBackground*/}
                    {/*style={{width: 300, height: 300}}*/}
                    {/*source={{*/}
                        {/*uri: '/data/user/0/com.asist.android/files/RNFetchBlobTmp_m0x36ghuspl0xrgb798exw.jpeg'*/}
                    {/*}}*/}
                {/*/>*/}

                {lessons.length !== 0
                    ?
                    <FlatList
                        // data={serverUrls}
                        data={lessons}
                        renderItem={({item}) => (
                            <ListItem style={{marginLeft: 0}}>
                                <Body>
                                <Text>
                                    {item.name}
                                </Text>
                                <Text note>
                                    {item.fileDescription}
                                </Text>
                                {item.lessonType===0&&
                                <Text note>
                                    {item.text}
                                </Text>}
                                </Body>
                                <Right>
                                    {item.lessonType===1&&<TouchableOpacity onPress={() => this.props.downloadFile(item.id,item.fileExtension,API_URL+item.urlFile,item.name)}>
                                       <Text style={{color:'#0000FF'}}>{'открыть'}</Text>
                                    </TouchableOpacity>}
                                </Right>
                            </ListItem>
                        )}
                        keyExtractor={item => item.id}
                        // ListFooterComponent={this.renderFooter}
                        // onEndReached={this._loadMoreTask}
                        // onEndReachedThreshold={50}
                        // onRefresh={this._refreshTask}
                        // refreshing={refreshing}

                    />
                    :
                    <Container>
                        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                            {/*<Icon primary name="flame" style={{fontSize: 80, color: "#369ad6"}}/>*/}
                            <Text style={{fontSize: 20, color: "#369ad6"}}>Пока нет файлов</Text>
                        </View>
                    </Container>
                }


            </Container>
        );
    }

}

FileDownload.propTypes = {
    navigation: PropTypes.object.isRequired,
    serverUrls: PropTypes.array,
    downloaded: PropTypes.array,
};

FileDownload.navigationOptions = {
    title: 'Загрузка файлов',
    header: null,
};
FileDownload = connect(
    state => {
        const {auth, files, lessons} = state;
        return {
            serverUrls:files.serverUrls,
            downloaded:files.downloaded,
            isFetch:files.isFetch,
            lessons: lessons.lessons,
        }
    },
    {downloadFile, loadLessons}               // bind action creator
)(FileDownload);

FileDownload.defaultProps = {};

export default FileDownload;
	import React, {Component} from 'react';
	import PropTypes from 'prop-types';
	import {connect} from 'react-redux';
	import {
	Container,
	Header,
	Content,
	Card,
	CardItem,
	Thumbnail,
	Text,
	Button,
	Icon,
	Right,
	Left,
	ListItem,
	Body, Item, Input, Footer, Title
	} from 'native-base';
	import NewHeader from "../component/NewHeader"
	import {Platform, View, FlatList, ImageBackground,TouchableOpacity,Image} from 'react-native'
	import {height, widthScreen} from "../core/constantce";
	import {openRoutTTDetails} from '../actions/navigate'
	import {downloadFile} from '../actions/files'
	import {loadLessons} from '../actions/lessons'
	import RNFetchBlob from 'react-native-fetch-blob'
	import {taskType} from "../core/status";
	import {API_URL} from "../middleware/api";
	import SpinerForAllScreen from "../component/SpinerForAllScreen"


	class FileDownload extends Component {
	constructor(props) {
	super(props)
	this.state = {
	source: ""
	}
	}

	componentDidMount() {
	this.props.loadLessons();
	}

	pressing() {

	let dirs = RNFetchBlob.fs.dirs
	// console.log("dirs", dirs, RNFetchBlob.fs, RNFetchBlob.ios)
	RNFetchBlob
	.config({
	//path : RNFetchBlob.fs.dirs.DocumentDir + '/userThumbnails/test.jpeg',
	Authorization: 'Bearer access-token...',
	appendExt: 'jpeg',
	fileCache: true,
	})
	.fetch('GET', 'https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg', {
	'Cache-Control': 'no-store'
	})
	.then((res) => {
	res.path() // where the file is
	// console.log("res", res.path())
	if (Platform.OS === 'ios') {
	RNFetchBlob.ios.openDocument(res.path()); // results in path/to/file.jpg
	}
	this.setState({
	source: res.path()
	})
	})
	.catch((errorMessage, statusCode) => {
	console.log("error download", errorMessage, statusCode)
	})

	}

	render() {
	const {serverUrls, downloaded, lessons,isFetch}=this.props;
	console.log("serverUrls",serverUrls,downloaded,lessons)

	if (serverUrls.length === 0) {
	return (
	<Container>
	<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
	<Icon primary name="flame" style={{fontSize: 80, color: "#369ad6"}}/>
	<Text style={{fontSize: 20, color: "#369ad6"}}>Пока нет файлов</Text>
	</View>
	</Container>
	)
	}

	return (
	<Container style={{backgroundColor: '#fff'}}>
	<NewHeader title="Обучение" navigation={this.props.navigation}/>
	<SpinerForAllScreen isFetch = {isFetch}/>

	{/<Image source={{uri: 'file///data/user/0/com.asist.android/files/RNFetchBlobTmp_0h4tveiun5ujzias07c93.jpg'}}/>/}

	{/<View>/}
	{/<Button full onPress={() => this.pressing()}><Text>Image</Text></Button>/}
	{/</View>/}


	{/<ImageBackground/}
	{/style={{width: 300, height: 300}}/}
	{/source={{/}
	{/uri: '/data/user/0/com.asist.android/files/RNFetchBlobTmp_m0x36ghuspl0xrgb798exw.jpeg'/}
	{/}}/}
	{//>/}

	{lessons.length !== 0
	?
	<FlatList
	// data={serverUrls}
	data={lessons}
	renderItem={({item}) => (
	<ListItem style={{marginLeft: 0}}>
	<Body>
	<Text>
	{item.name}
	</Text>
	<Text note>
	{item.fileDescription}
	</Text>
	{item.lessonType===0&&
	<Text note>
	{item.text}
	</Text>}
	</Body>
	<Right>
	{item.lessonType===1&&<TouchableOpacity onPress={() => this.props.downloadFile(item.id,item.fileExtension,API_URL+item.urlFile,item.name)}>
	<Text style={{color:'#0000FF'}}>{'открыть'}</Text>
	</TouchableOpacity>}
	</Right>
	</ListItem>
	)}
	keyExtractor={item => item.id}
	// ListFooterComponent={this.renderFooter}
	// onEndReached={this._loadMoreTask}
	// onEndReachedThreshold={50}
	// onRefresh={this._refreshTask}
	// refreshing={refreshing}

	/>
	:
	<Container>
	<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
	{/<Icon primary name="flame" style={{fontSize: 80, color: "#369ad6"}}/>/}
	<Text style={{fontSize: 20, color: "#369ad6"}}>Пока нет файлов</Text>
	</View>
	</Container>
	}


	</Container>
	);
	}

	}

	FileDownload.propTypes = {
	navigation: PropTypes.object.isRequired,
	serverUrls: PropTypes.array,
	downloaded: PropTypes.array,
	};

	FileDownload.navigationOptions = {
	title: 'Загрузка файлов',
	header: null,
	};
	FileDownload = connect(
	state => {
	const {auth, files, lessons} = state;
	return {
	serverUrls:files.serverUrls,
	downloaded:files.downloaded,
	isFetch:files.isFetch,
	lessons: lessons.lessons,
	}
	},
	{downloadFile, loadLessons} // bind action creator
	)(FileDownload);

	FileDownload.defaultProps = {};

	export default FileDownload;