Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, {Component} from 'react';
- import {ScrollView, Text, StyleSheet, View, Modal, TouchableHighlight, AsyncStorage} from 'react-native';
- import DeviceInfo from 'react-native-device-info'
- import Accordion from 'react-native-collapsible/Accordion';
- import * as Animatable from 'react-native-animatable';
- import FitImage from 'react-native-fit-image';
- import {Header, Icon} from 'react-native-elements'
- var services = require('../assets/service.json');
- //
- // var SECTIONS = [
- // {
- // title: 'Netflix',
- // nom: 'DELIGNIERES',
- // prenom: 'Matthieu',
- // sexe: 'Homme',
- // ville: 'Anzin',
- // isAbo: 'true',
- // durationAbo: '6 mois',
- // hasNews: 'false',
- // image: 'https://img3.telestar.fr/var/telestar/storage/images/3/0/5/6/3056045/netflix-annonce-des-projets-france_width1024.png'
- // },
- // {
- // title: 'Allocine',
- // nom: 'HUBLARD',
- // prenom: 'Grobin',
- // sexe: 'Male',
- // ville: 'Campagne',
- // isAbo: 'true',
- // durationAbo: '3 mois',
- // hasNews: 'true',
- // image: 'http://www.business-actor.com/wp-content/uploads/2013/07/logo-allocine.png'
- // },
- // {
- // title: 'Brazzer',
- // nom: 'Sabadini',
- // prenom: 'Jerome',
- // sexe: 'Homme',
- // ville: 'Valenciennes',
- // isAbo: 'true',
- // durationAbo: 'A vie',
- // hasNews: 'true',
- // image: 'https://i.redd.it/9nfas2kg75py.png'
- // },
- // {
- // title: 'Spotify',
- // nom: 'LEBRUM',
- // prenom: 'Audrey',
- // sexe: 'Femme',
- // ville: 'Famars',
- // isAbo: 'false',
- // durationAbo: '',
- // hasNews: 'false',
- // image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Spotify_logo_with_text.svg/2000px-Spotify_logo_with_text.svg.png'
- // }
- // ];
- const styles = StyleSheet.create({
- fitImage: {
- borderRadius: 20,
- },
- container: {
- flex: 1,
- justifyContent: 'center',
- backgroundColor: '#F5FCFF',
- },
- title: {
- textAlign: 'center',
- fontSize: 22,
- fontWeight: '300',
- marginBottom: 20,
- },
- header: {
- backgroundColor: '#F5FCFF',
- padding: 10,
- },
- headerText: {
- textAlign: 'center',
- fontSize: 16,
- fontWeight: '500',
- },
- content: {
- padding: 20,
- backgroundColor: '#fff',
- },
- active: {
- backgroundColor: 'rgba(255,255,255,1)',
- },
- inactive: {
- backgroundColor: 'rgba(245,252,255,1)',
- },
- selectors: {
- marginBottom: 10,
- flexDirection: 'row',
- justifyContent: 'center',
- },
- selector: {
- backgroundColor: '#F5FCFF',
- padding: 10,
- },
- activeSelector: {
- fontWeight: 'bold',
- },
- selectTitle: {
- fontSize: 14,
- fontWeight: '500',
- padding: 10,
- },
- });
- var update = require('react-addons-update');
- class ResultScreen extends Component {
- state = {
- modalVisible: false,
- };
- static navigationOptions = {
- header: () => null,
- };
- setModalVisible(visible) {
- this.setState({modalVisible: visible});
- }
- json = {};
- SECTIONS = [];
- constructor(props) {
- super(props);
- this.setModalVisible = this.setModalVisible.bind(this);
- this.updateState = this.updateState.bind(this);
- this._renderContent = this._renderContent.bind(this)
- this._renderHeader = this._renderHeader.bind(this);
- this.render = this.render.bind(this);
- this.json = {};
- this.SECTIONS = [];
- this._parseStorage();
- }
- updateState(infoName) {
- let newState = {};
- let scope = this;
- return function (value) {
- newState[infoName] = scope.state[infoName];
- newState[infoName].value = value;
- scope.setState(function () {
- return update(scope.state, {$merge: newState}
- )
- });
- }
- }
- _renderHeader(section, index, isActive, sections) {
- return (
- <Animatable.View
- duration={300}
- transition="backgroundColor"
- style={{backgroundColor: (isActive ? 'rgba(255,255,255,1)' : 'rgba(245,252,255,1)')}}>
- {/*<FitImage*/}
- {/*source={{uri: section.image}}*/}
- {/*style={styles.fitImage}*/}
- {/*/>*/}
- <Text style={styles.headerText}>TITRE</Text>
- </Animatable.View>
- );
- }
- _renderContent(section, i, isActive, sections) {
- // let message = "";
- // console.error(section);
- // for(var l = 0; l < section.length; l++){
- // message.append(section[i]+"\n");
- // }
- return (
- <Animatable.View
- duration={300}
- transition="backgroundColor"
- style={{backgroundColor: (isActive ? 'rgba(255,255,255,1)' : 'rgba(245,252,255,1)')}}>
- <Animatable.Text
- duration={300}
- easing="ease-out"
- >
- <Text>test</Text>
- </Animatable.Text>
- </Animatable.View>
- );
- }
- _parseStorage(){
- let scope = this;
- AsyncStorage.getItem('AwesomeProjectStorage').then(function (data) {
- scope.json = JSON.parse(data);
- let numberOfServices = Object.keys(scope.json).length;
- for(let index = 0; index < numberOfServices; index++){
- let service = scope.json[Object.keys(scope.json)[index]];
- scope.SECTIONS.push(service);
- //let numberOfElementsInThisService = Object.keys(this.service).length;
- }
- // console.error(numberOfElementsInThisService);
- // let js2 = Object.keys(service[0]);
- // console.error(service[0][js2[0]]);
- // // console.error(js+" \n "+this.json[js]+"\n")
- // console.error("!data: " + this.json);
- scope.forceUpdate();
- });
- }
- render() {
- // if(this.json == null){
- // this.json=[];
- // }
- if(this.SECTIONS == null){
- this._parseStorage();
- }
- return (
- <ScrollView>
- <View style={{backgroundColor: 'white'}}>
- <Header
- centerComponent={{text: "Les résultats", style: {color: 'tomato'}}}
- rightComponent={
- <Icon
- name="extension"
- color='tomato'
- onPress={() => {
- this.setModalVisible(!this.state.modalVisible);
- }}
- underlayColor={'#64b5f6'}
- />
- }
- outerContainerStyles={{height: 50}}
- innerContainerStyles={{height: 50}}
- backgroundColor="white"
- />
- <Modal
- style={{
- position: 'relative',
- padding: 30
- }}
- animationType="slide"
- transparent={false}
- visible={this.state.modalVisible}
- onRequestClose={() => {
- alert('Modal has been closed.');
- }}>
- <Text style={{
- fontSize: 20,
- marginBottom: 10,
- marginLeft: 10,
- marginTop: 10,
- }}>Données du téléphone</Text>
- <Text style={{
- marginLeft: 10
- }}>Marque : {DeviceInfo.getBrand()}</Text>
- <Text style={{
- marginLeft: 10
- }}>Nom du device : {DeviceInfo.getDeviceName()}</Text>
- <Text style={{
- marginLeft: 10
- }}>Fournisseur : {DeviceInfo.getManufacturer()}</Text>
- <Text style={{
- marginLeft: 10
- }}>Numéro de Téléphone : {DeviceInfo.getPhoneNumber()}</Text>
- <Text style={{
- marginLeft: 10
- }}>Mémoire max autorisé(en bytes): {DeviceInfo.getMaxMemory()}</Text>
- <Text style={{
- marginLeft: 10
- }}>Mémoire Total (en bytes): {DeviceInfo.getTotalMemory()}</Text>
- <Text style={{
- marginLeft: 10
- }}>Stockage total (en bytes): {DeviceInfo.getTotalDiskCapacity()}</Text>
- <TouchableHighlight
- onPress={() => {
- this.setModalVisible(!this.state.modalVisible);
- }} style={{
- position: 'absolute',
- top: 10,
- right: 10
- }}>
- <Icon
- name="close"
- color='tomato'
- onPress={() => {
- this.setModalVisible(!this.state.modalVisible);
- }}
- style={{
- fontSize: 50,
- }}
- underlayColor={'#64b5f6'}
- />
- </TouchableHighlight>
- </Modal>
- </View>
- <ScrollView>
- <Accordion
- sections={this.SECTIONS}
- renderHeader={this._renderHeader}
- renderContent={this._renderContent}
- />
- </ScrollView>
- </ScrollView>
- );
- }
- }
- export default ResultScreen
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement