web-dev-qa-db-fra.com

Lier Picker à la liste de Picker.Item dans React Native

Je suis sûr qu'il existe un moyen de faire cela, mais je ne vois pas comment.

Ce que j'aimerais faire, c'est ajouter un composant Picker, mais plutôt que de coder en dur la liste d'éléments, récupérez-le à partir d'un service et associez le sélecteur à quelque chose que je pourra renseigner ultérieurement.

Voici ce que j'ai, mais mon application ne fonctionnera même pas maintenant. Des idées s'il vous plaît?

'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;
javascriptreact-native
12
Michael

Vous devriez probablement configurer votre état initial comme tableau vide, puis appeler votre service sur composantWillMount ou composantDidMount. J'ai mis en place quelque chose qui fonctionne avec des données factices ici , et collé le code ci-dessous. 

'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);
36
Nader Dabit

Vous pouvez essayer celui-ci.

<Picker
      selectedValue={this.state.facilityId}
      style={{ width: '100%' }}
      onValueChange={(itemValue) => this.setState({ facilityId: itemValue, facilityPicked: true })}>
      {facilities.map((facility, i) => {
        return <Picker.Item key={i} value={facility.id} label={facility.facility_name} />
      })}
</Picker>

Ici, facilités est une liste d'objets ayant pour id id et facility_name.

1
Yash

Aucune boucle requise, voici comment je l'ai fait dans mon projet natif de réaction, semblable à la réponse ci-dessus pour lier ou ajouter des données de manière dynamique dans Picker 

import React, {Component} from 'react';
import {Picker,View} from 'react-native';
export default class SampleApp extends Component  {

    constructor(props){
        super(props);
        // HARD CODED DATA , YOU CAN REPLACE THIS DATA  WITH API CALL DATA IN ComponentDidMount() 
       //or in Constructor because countryData is not state.
        this.countryData = ["India","Pakistan","USA"];
        // STATE    
        this.state({
            selectedCountry : null
        });
    }
    // Our country list generator for picker
    countryList = () =>{
        return( this.countryData.map( (x,i) => { 
              return( <Picker.Item label={x} key={i} value={x}  />)} ));
    }
    // RENDER
    render() {
        return (
            <View>
                <Picker
                    selectedValue={this.state.selectedCountry}
                    onValueChange={ (value) => ( this.setState({selectedCountry : value}) )}>
                    { this.countryList() }
                </Picker>
            </View>
        );
    }
}

J'espère que vous trouverez mon exemple simple à comprendre;)

1
Abhiode

J'ai eu la même erreur. Le problème ne concerne pas le sélecteur, mais votre code.

let items = props.category.map((item,index) => {
     return ( <Picker.Item key={index} label={item.category} value={item.category} /> )
   })
  return(
         <Picker style={styles.pickerStyle}>{items}</Picker>
        );

Au lieu d'utiliser item.category, j’utilisais item.name, ce qui a provoqué l’arrêt de mon application .Vérifiez la valeur de vos données.

0
Rahul Kumar