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