BooksInfo/detailscreen.js at master · Muhammad-Abdullah-dev/BooksInfo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import {createStackNavigator, createAppContainer} from 'react-navigation';
import { StyleSheet,View,Button,Text,TouchableOpacity,Image } from 'react-native';
import React, { Component } from 'react';
// import console = require('console');


export default class detailscreen extends React.Component {

    constructor(){
        super()
        this.state = {
          item: "empty"
        }
    }
    componentDidMount(){

      this.setState({
          item : this.props.navigation.getParam('itemId', 'NO-ID') ,


      })

  }


  static navigationOptions = ({ navigation }) => {

    return {
      title: navigation.getParam('itemId', 'A Nested Details Screen').title,
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.navigate('mainScreen', {name: 'main'})}>
      <Image
        style={{resizeMode:'contain',height:30,width:30,margin:10}}
        source={require('./assests/backbutton.png')}
      />
      </TouchableOpacity>

      ),
    headerStyle: {
      backgroundColor: 'red',
      textAlign: 'center',
    },
    alignSelf: 'center',
    headerTitleStyle: {
      fontWeight: 'bold',
      fontWeight: '300',
      textAlign: 'center',
      justifyContent: 'center',
      alignSelf: 'center',
      alignItems: 'center',
      flex: 1

    },
  }
}


handleauthornames = () => {
  console.log("in function1")

  if (this.state.item !== "empty")
  {
    var back = this.state.item.authors.map((item, key)=>{
     return(   <Text key={key} style = {{marginLeft:25,color:'blue'}} > { item }  </Text>)
    })
    console.log("in function")
    console.log(back)
    return back;
  }
  return null;
}


    render() {
      console.log(this.state.item)
      console.log("short")
      console.log(this.state.item.shortDescription)
      return (

      <View style={styles.container}>

        <View >
          <Image style={{width: 180,height:180,marginTop:10,marginLeft:90 }}
                    source={{ uri: this.state.item.thumbnailUrl }} />
                    <Text style={{marginTop:5,marginLeft:25,color:'blue'}}>
                      Authours:
                     </Text>

                       {this.handleauthornames() }


                   <Text> ISBN: {this.state.item.isbn}   </Text>
                 <Text> shortDescription: {this.state.item.shortDescription}  </Text>
                 <Text> shortDescription: {this.state.item.shortDescription}  </Text>
        </View>


      </View>

      );
    }
  }


  const styles = StyleSheet.create({
    container: {
      flex: 1,
       justifyContent:'space-between'
    },
    acontain:{

    }
  })