Picker.ItemをReactネイティブにリストするバインド・ピッカー

Question

これを行う方法はあると確信していますが、私はまだどのように見えていません。

ピッカーコンポーネントを追加するのですが、アイテムのリストをハードコードし、サービスからフェッチして、後で取り込めるものにピッカーをバインドしてください。

これは私が持っているものですが、私のアプリは今実行されません。どんなアイデアですか？

'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

初期状態を空の配列として設定し、componentWillMountまたはcomponentDidMountでサービスを呼び出してください。ダミーデータhereで動作するものをセットアップし、以下のコードを貼り付けました。

'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);