web-dev-qa-db-de.com

Binden Sie den Picker an die Liste von Picker.Item in React Native

Ich bin sicher, dass es einen Weg gibt, dies zu tun, aber ich kann nur noch nicht sehen, wie.

Was ich gerne tun würde, ist, eine Picker-Komponente hinzuzufügen, aber anstatt die Liste der Elemente hart zu codieren, holen Sie diese von einem Dienst ab und lassen Sie den Picker an etwas gebunden, das ich später auffüllen kann.

Hier ist was ich habe, aber meine App wird jetzt nicht einmal ausgeführt. Irgendwelche Ideen bitte?

'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

Sie sollten Ihren Anfangsstatus wahrscheinlich als leeres Array einrichten und dann Ihren Dienst über ComponentWillMount oder ComponentDidMount aufrufen. Ich habe etwas eingerichtet, das mit einigen Dummy-Daten here funktioniert, und den folgenden Code eingefügt. 

'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

WICHTIG : Wenn Sie versuchen, ein Array von Zahlen mit map zu durchlaufen, vergessen Sie das nicht label Eigentum von Picker.Item sollte in string konvertiert werden:

const pickerItems = [1,2,3].map(i => (
      <Picker.Item label={i.toString()} value={i} />
));
2
Hilarion Galushka

Sie können dies versuchen.

<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>

Facilities ist hier eine Liste von Objekten mit der ID und facility_name als Schlüssel.

1
Yash

Keine Schleifen erforderlich, hier wie ich es in meinem reaktionsbasierten Projekt getan habe, ähnlich der obigen Antwort zum dynamischen Binden oder Hinzufügen von Daten in 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>
        );
    }
}

Hoffe du findest mein Beispiel einfach zu verstehen;)

1
Abhiode

Ich habe den gleichen Fehler bekommen. Das Problem liegt nicht beim Picker, sondern beim 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>
        );

Anstelle von item.category verwendete ich item.name, was dazu führte, dass meine App angehalten wurde ..__ Überprüfen Sie also den Wert Ihrer Daten.

0
Rahul Kumar