J'ai développé une application mobile en React Native. Une liste de sélection horizontale est nécessaire dans un écran (Désolé, je n'ai pas trouvé le nom du composant).
Conception de la page:
Dans l'image, après le prix, l'unité et l'intervalle de temps ont une boîte de sélection comme l'utilisateur ne peut sélectionner qu'une seule boîte avec cette conception horizontalement. Comment y parvenir.
Je n'ai aucune idée de comment y parvenir, veuillez me guider s'il existe un package pour cela, ou y a-t-il un moyen pour y parvenir?
Mise à jour: J'ai réalisé la mise en page en utilisant FlatList dans React native. Maintenant, comment atteindre la fonction de sélection unique. Voici ma Flatlist
<FlatList
horizontal={true}
data={this.qtyList}
keyExtractor={item => item.id.toString()}
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => (
<TouchableHighlight
onPress={() => {
this.props.qtyListSelector(item.id)
}}
>
<Card
containerStyle={{ borderRadius: 5 }}
>
<Text>
{item.qty}
</Text>
</Card>
</TouchableHighlight>
)}
/>
J'utilise Redux pour saisir la valeur de la carte touchée. Maintenant, je dois changer de couleur et mettre en surbrillance la carte sélectionnée par l'utilisateur comme l'exemple ci-dessus. Je pense que cela peut être fait en utilisant l'état au niveau du composant. S'il vous plaît guider comme, je n'ai pas pu comprendre les étapes comme je suis débutant
3 Réponses :
Vous pouvez utiliser FlatList avec horizontal true.
<FlatList horizontal={true}/>
Et aussi dans ce lien, vous pouvez trouver l'utilisation horizontale FlatList. Cela peut vous donner un point de départ.
https: // ruesmartdev .com / create-horizontal-list-react-native /
si oui, comment sélectionner et mettre en évidence un seul élément que l'utilisateur sélectionne? est-ce possible avec flatlist?
Par exemple, chaque élément FlatList peut être enveloppé par un TouchableOpacity et vous pouvez faire ce dont vous avez besoin dans le onPress de TouchableOpacity. Vous pouvez donner un highligt avec style. De plus, si vous le souhaitez, vous pouvez utiliser un package tel que react-native-snap-carrousel ou autre. Il peut gérer tout ce que vous voulez.
Si la solution Flatlist horizontale ne fonctionne pas pour vous, j'ai eu de bonnes expériences en utilisant https: //www.npmjs.com/package/swiper .
Ceci peut être réalisé sans aucune bibliothèque externe, ou vous pouvez utiliser le swiper natif de réaction, mais cette bibliothèque a quelques problèmes quand il s'agit de sélectionner. L'approche que vous pouvez utiliser sans aucune bibliothèque est
renderItem =({item, index}) => {
return (
<TouchableOpacity
onPress={() => {
// I wrote it like this so you could understand.
// first get your previous array
const tempArray = this.state.data;
// If you want single selection, add the code I wrote in the end
here.
// second change the selected value of this item
tempArray[index].selected = true;
// update the state
this.setState({ data: tempArray, selectedItem: item });
// here selected Item is not used, but you might need it in future purpose.
}}
style={{ backgroundColor: item.selected ? 'orange' : 'white' }}>
</TouchableOpacity>
);
}
...
<FlatList
horizontal={true}
data={this.state.data}
extraData={this.state.selectedItem}
renderItem={this.renderItem}
/>
Vous avez besoin d'extraData pour vous assurer que votre FlatList , ré-affiche lorsque vous appuyez sur l'élément individuel.
Maintenant, dans votre méthode renderItem, vous pouvez simplement utiliser quelque chose comme,
state = {
data: [
{ key: '1', name: 'mark', selected: false },
{ key: '2', name: 'john', selected: false }
],
selectedItem: null
}
Cette approche sélectionnera plusieurs éléments ... Si vous souhaitez désélectionner le précédent.
alors vous devez mapper sur le tableau précédent ou utiliser l'état selectedItem pour trouver l'élément à l'aide de la méthode findIndex pour les tableaux (vous devez l'implémenter dans onPress)
pour la carte, un exemple simple serait
const tempArray = tempArray.map ((singleItem) => {... singleItem, selected: false})); p >
REMARQUE: j'ai écrit ce code uniquement ici, il peut donc y avoir des erreurs. Veuillez me le faire savoir le cas échéant.
Je recopie comme tu l'as dit, mais rien ne se passe. Impossible de comprendre l'erreur également car il n'y a pas d'erreur! (désolé totalement un débutant)
Cela devrait fonctionner, assurez-vous que vous faites tout correctement et, si possible, publiez votre code
J'ai obtenu le look en utilisant une liste plate et une propriété horizontale. Mais, comment mettre en œuvre la procédure de sélection. En tant que, je dois obliger l'utilisateur à sélectionner une option parmi les données.
J'ai également ajouté le code pour atteindre cette fonctionnalité,
Peut-on discuter ? En fait, ne pouvait pas comprendre le frère de code!