Introduction à React Native

React Native permet de créer des applications mobiles natives pour iOS et Android en utilisant React et JavaScript.

Configuration

# Installation
npm install -g react-native-cli

# Création d'un projet
npx react-native init MonApp
cd MonApp

# Structure du projet
MonApp/
├── android/
├── ios/
├── src/
│   ├── components/
│   ├── screens/
│   ├── navigation/
│   └── App.tsx
├── package.json
└── index.js

# Démarrage
npx react-native start
npx react-native run-android
npx react-native run-ios

Composants de base

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

const App = () => {
  return (
    
      
        
        
          Mon Application
        
      

       alert('Clic!')}
      >
        
          Appuyer ici
        
      
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  header: {
    padding: 20,
    alignItems: 'center'
  },
  logo: {
    width: 100,
    height: 100
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold'
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 15,
    borderRadius: 5,
    margin: 10
  },
  buttonText: {
    color: '#fff',
    textAlign: 'center'
  }
});

Navigation

Configuration

npm install @react-navigation/native
npm install @react-navigation/stack
npm install @react-navigation/bottom-tabs

// App.tsx
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function App() {
  return (
    
      
        
        
      
    
  );
}

Utilisation

// Navigation entre écrans
function HomeScreen({ navigation }) {
  return (

Fonctionnalités natives

// Caméra
import { Camera } from 'react-native-vision-camera';

async function takePicture() {
  const permission = await Camera.requestCameraPermission();
  if (permission === 'authorized') {
    const photo = await camera.current.takePhoto();
  }
}

// Géolocalisation
import Geolocation from '@react-native-community/geolocation';

Geolocation.getCurrentPosition(
  position => {
    const {latitude, longitude} = position.coords;
  },
  error => console.log(error),
  {enableHighAccuracy: true}
);

// Notifications Push
import messaging from '@react-native-firebase/messaging';

async function requestPermission() {
  const authStatus = await messaging().requestPermission();
  const token = await messaging().getToken();
}

Publication

# Android
cd android
./gradlew assembleRelease

# Configuration Android
android/app/build.gradle:
android {
    signingConfigs {
        release {
            storeFile file("release.keystore")
            storePassword "******"
            keyAlias "my-key-alias"
            keyPassword "******"
        }
    }
}

# iOS
cd ios
pod install
xcodebuild -workspace MonApp.xcworkspace \
  -scheme MonApp \
  -configuration Release \
  -sdk iphoneos \
  archive

# Configuration iOS
Info.plist:
NSCameraUsageDescription
Cette app utilise la caméra pour...

NSLocationWhenInUseUsageDescription
Cette app utilise la géoloc pour...