Commencez avec React Native Disposouts

Ce didacticiel vous guidera comment concevoir la disposition de votre application native React et implémenter les dispositions couramment utilisées dans votre application, y compris l'empilement, la mise en page de la grille et la mise en page absolue. Je suppose que vous connaissez déjà le style de base des applications natives React et comment utiliser CSS, afin que vous n'expliquez pas trop sur l'élément FlatGrid.

Vous pouvez l'importer directement et si vous utilisez Snack, Expo vous demandera si vous souhaitez l'installer. Sinon, vous pouvez l'installer avec la commande suivante:

npm install react-native-super-grid

Importez la bibliothèque dans votre fichier et extraire différents composants.

import React from 'react';
import {
  StyleSheet,
  View,
  Text
} from 'react-native';

import { FlatGrid, SectionGrid } from 'react-native-super-grid';

FlatList Utilisé pour rendre une liste sans partition; SectionList utilisé pour rendre une liste avec plusieurs sous-parties.

super-grid L'API est basée sur le passage des réseaux de données et les méthodes de rendu, plutôt que de tout prendre en tant qu'élément enfant JSX. Cela aide à simplifier le code car vous n'avez pas à écrire une grille, mais il suffit de mettre les données.

import React from 'react';
import {
  StyleSheet,
  View,
  Text
} from 'react-native';
import { FlatGrid } from 'react-native-super-grid';

const styles = StyleSheet.create({
  Item: {
    color: "red"
  },
  Grid: {
    backgroundColor: "grey"
  }
});

export default function JustifyContent() {
    return (
      <flatgrid style="{styles.Grid}" itemdimension="{130}" data="{[1,2,3,4,5,6]}" renderitem="{({" item> (<text style="{styles.Item}">{item}</text>)}
      />
    );
}</flatgrid>

Résumé

Dans ce tutoriel, vous avez appris à concevoir la disposition des applications natives React. Plus précisément, vous avez appris à utiliser Flexbox de React Native pour localiser les éléments. Vous avez également appris à utiliser React Native Super Grid, ce qui facilite l'implémentation de la grille. Vous pouvez afficher l'exemple de code complet et la collation Expo avec toutes les dispositions.

Dans le prochain tutoriel, nous mettrons tout ce que vous avez appris en pratique en recréant des éléments d'interface utilisateur communs dans votre application: tels que le calendrier, la liste et la navigation à l'onglet.

Cet article a été mis à jour avec les contributions de Jacob Jackson. Jacob est développeur Web, écrivain technologique, pigiste et contributeur open source.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!