Bind Picker alla lista di Picker.Item in React Native

Question

Sono sicuro che c'è un modo per farlo, ma non riesco ancora a vedere come.

Quello che mi piacerebbe fare è aggiungere un componente di selezione, ma piuttosto che codificare l'elenco degli elementi, recuperarlo da un servizio e fare in modo che il selettore sia associato a qualcosa che posso compilare in seguito.

Ecco cosa ho, ma la mia app non funzionerà nemmeno ora. Qualche idea per favore?

'use strict'; 
var React = require('react-native'); 
var { 
    Picker, 
    Text, 
    View 
} = React; 

var AvailableServices = React.createClass({ 
    getInitialState() { 
     var fetchServicesUri = 'http://some.url/available_services'; 
     fetch(fetchServicesUri) 
      .then((response) => response.json()) 
      .then((responseJson) => { 
       console.log(responseJson); 
       var services = []; 
       for(var service in responseJson.services) { 
        services.push(<Picker.Item label={service.Label} value={service.Value}/>); 
       } 
       this.setState({ 
        services: services 
       }); 
      }) 
      .catch((error) => { 
       console.warn(error); 
      }) 
      .done(); 
     return { 
      services: [], 
      selectedService: null 
     } 
    }, 

    render() { 
     return (
      <View> 
       <Text>Pick a service</Text> 
       <Picker 
        selectedValue={this.state.selectedService} 
        onValueChange={(service) => this.setState({selectedService:service})} 
       > 
        {this.state.services} 
       </Picker> 
      </View> 
     ); 
    } 
}); 

module.exports = AvailableServices; 

Answer 1

Probabilmente si dovrebbe configurare il vostro stato iniziale come la matrice vuota, quindi chiamare il servizio su componentWillMount o componentDidMount. Ho impostato qualcosa che funziona con alcuni dati fittizi here e incollato il codice seguente.

'use strict'; 
var React = require('react-native'); 
var { 
    Picker, 
    Text, 
    View, 
     AppRegistry 
} = React; 

var PickerItem = Picker.Item; 

var SampleApp = React.createClass({ 
    getInitialState() { 
     return { 
      services: ['a', 'b', 'c', 'd', 'e'], 
      selectedService: 'a' 
     } 
    }, 

    componentDidMount() { 
     setTimeout(() => { 
     this.setState({ 
      services: [ 'one', 'two', 'three', 'four', 'five' ] 
     }) 
     }, 3000) 
    }, 

    render() { 
     let serviceItems = this.state.services.map((s, i) => { 
      return <Picker.Item key={i} value={s} label={s} /> 
     }); 

     return (
      <View> 
       <Text>Pick a service</Text> 
       <Picker 
        selectedValue={this.state.selectedService} 
        onValueChange={ (service) => (this.setState({selectedService:service})) } > 

        {serviceItems} 

       </Picker> 
      </View> 
     ); 
    } 
}); 


AppRegistry.registerComponent('SampleApp',() => SampleApp);