​

Les Paradigmes de Développement Mobile

​

React Native (Cross-Platform Rendu Natif)

• Le Bridge (Pont) : Le moteur JavaScript (où votre code tourne) communique de manière asynchrone avec les threads UI natifs (iOS/Android) via un pont sérialisé. C’est ce qui permet au code JS de commander l’affichage de composants natifs.
• Composants Natifs : Au lieu d’utiliser des balises HTML (<div>, <span>), React Native utilise des composants qui se mappent directement sur leurs équivalents natifs :
  • <View> (équivalent de UIView sur iOS, android.view sur Android).
  • <Text> (pour du texte stylisé).
• Style (Flexbox) : Le style est défini en JavaScript (ou TypeScript) et utilise le modèle Flexbox pour la mise en page. Il n’utilise pas de CSS ni de sélecteurs classiques.

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

const MobileCard = ({ titre }) => {
  return (
    // <View> est le conteneur principal (comme une <div>)
    <View style={styles.cardContainer}>
      {/* <Text> pour le contenu textuel */}
      <Text style={styles.title}>{titre}</Text> 
    </View>
  );
};

// Les styles sont définis dans un objet JavaScript
const styles = StyleSheet.create({
  cardContainer: {
    backgroundColor: '#f5f5f5',
    padding: 16,
    borderRadius: 8,
    marginVertical: 10, // Utilisation de camelCase pour les propriétés CSS
    shadowOpacity: 0.1, // Propriétés spécifiques à l'ombre (non-standard CSS)
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

export default MobileCard;

​

Autres Frameworks Cross-Platform

​

Le Style et la Mise en Page Mobile