DanieleCalisti

App.js

Nov 17th, 2020
122
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2.  
  3. import { AppRegistry, StyleSheet, View, Platform, Picker, ActivityIndicator, Button, Alert} from 'react-native';
  4.  
  5. export default class App extends Component {
  6.  
  7.  constructor(props)
  8.  {
  9.  
  10.    super(props);
  11.  
  12.    this.state = {
  13.  
  14.    isLoading: true,
  15.  
  16.    PickerValueHolder : ''
  17.  
  18.   }
  19.  }
  20.  
  21.  componentDidMount() {
  22.    
  23.       return fetch('http://provareact.altervista.org/reactNative.php')
  24.         .then((response) => response.json())
  25.         .then((responseJson) => {
  26.           this.setState({
  27.             isLoading: false,
  28.             dataSource: responseJson
  29.           }, function() {
  30.             // In this block you can do something with new state.
  31.           });
  32.         })
  33.         .catch((error) => {
  34.           console.error(error);
  35.         });
  36.     }
  37.  
  38.     GetPickerSelectedItemValue=()=>{
  39.  
  40.       Alert.alert(this.state.PickerValueHolder);
  41.  
  42.     }
  43.  
  44.  render() {
  45.  
  46.    if (this.state.isLoading) {
  47.      return (
  48.        <View style={{flex: 1, paddingTop: 20}}>
  49.          <ActivityIndicator />
  50.        </View>
  51.      );
  52.    }
  53.  
  54.    return (
  55.  
  56.     <View>
  57.  
  58.           <Picker
  59.             selectedValue={this.state.PickerValueHolder}
  60.  
  61.             onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} >
  62.  
  63.             { this.state.dataSource.map((item, key)=>(
  64.             <Picker.Item label={item.nome} value={item.nome} key={key} />)
  65.             )}
  66.    
  67.           </Picker>
  68.                 <Text>Mellaucci</Text>
  69.           <Button title="Clicca qui per vedere gli elementi del picker" onPress={ this.GetPickerSelectedItemValue } />
  70.  
  71.     </View>
  72.            
  73.    );
  74.  }
  75. }
  76.  
Advertisement
Add Comment
Please, Sign In to add comment