Création d'une application mobile sur React Native

Bonjour à tous. Ce sera la première partie de la création de notre application mobile.

Nous ferons une application mobile en utilisant React Native et Expo. Nous ne créerons pas une excellente application de nouvelles. Pour cela, nous utiliserons php via rest api.

Dans notre application, nous afficherons des articles qui seront en phpmyadmin.

Qu'est-ce que l'expo?

Expo, est un ensemble d'outils, de bibliothèques et de services qui vous permettent de créer vos propres applications pour iOS et Android en utilisant JavaScript. Cela semble prometteur. En termes simples, Expo vous aide à visualiser les projets pendant que vous les développez. L'Expo CLI crée une URL de développement (similaire à un hôte local sur Internet) qui peut ensuite être ouverte dans le client Expo pour prévisualiser l'application.

Installation de l'Expo

Avant d'installer expo, assurez-vous d'installer npm.

npm install expo-cli —global 

Installer expo sur iphone

Installer expo sur android


Expo vous donne des options. Vous pouvez prévisualiser votre application via l'application cliente Expo sur votre appareil mobile ou en utilisant le simulateur iOS / Android sur votre ordinateur. Lors de la création de l'application, j'ai utilisé expo sur android.

Création d'une application expo

 epxo init 

Après l'installation d'Expo, l'interface d'Expo CLI s'ouvre et vous permet de sélectionner le nom et le modèle du projet. Nous choisirons une page vierge.

 cd newsApp expo start —tunnel 

Après cela, expo lancera le serveur de développement local, ouvrira une nouvelle fenêtre pour visualiser le serveur et vous fournira un code QR pour ouvrir votre projet sur votre appareil mobile. Ou vous pouvez vous inscrire dans l'application mobile et expo cli, et il affichera automatiquement les développements actuels de l'application mobile.

Pour entrer expo sur votre ordinateur, utilisez cette commande:

 expo login 

Installer react-navigation

Pour pouvoir passer d'un écran à l'autre, nous devons télécharger react-nativation:

 yarn add react-nativation 

Début du développement

Commençons maintenant notre développement.

La première chose que nous ferons est d'ouvrir App.js (notre fichier principal).

Disposition

Pour rendre notre application attrayante, nous allons ajouter quelques éléments et leur ajouter des styles.

Tout d'abord, ajoutez l'en-tête:

 render() { return ( <SafeAreaView style={styles.MainContainer}> <ScrollView > <Text style={styles.textTitle}>:</Text> </ScrollView> </SafeAreaView> ); } const styles = StyleSheet.create({ textTitle :{fontSize:22,fontFamily: 'Roboto-M',fontWeight:'700', padding:10}, }); 

Ajoutons maintenant un bloc avec la sortie des articles et stylons-le.

 import * as React from 'react'; import { View, Text, SafeAreaView, StyleSheet, Image, Dimensions, ScrollView } from 'react-native'; import Icon from 'react-native-vector-icons/Ionicons' export default class App extends React.Component { constructor(props) { super(props); this.state = { isLoading: true, fontLoaded: false } } async componentDidMount() { return fetch('http://rapprogtrain.com/server-side/test.php') .then((response) => response.json()) .then((responseJson) => { this.setState({ isLoading: false, dataSource: responseJson }, function() { // In this block you can do something with new state. }); }) .catch((error) => { console.error(error); }); } FlatListItemSeparator = () => { return ( <View /> ); } render() { return ( <SafeAreaView style={styles.MainContainer}> <ScrollView > <Text style={styles.textTitle}>:</Text> <View style={styles.postContainer}> <Image source = {{ uri: "https://tinyjpg.com/images/social/website.jpg" }} style={{resizeMode:'cover',width:null,height:null, flex:1, borderRadius:4, borderWidth:1, borderColor:'#dddddd'}} /> <Text style={styles.textOfArticle} > Lorem Ipsum is simply dummy text of the printing and typesetting industry. </Text> <View style={{marginTop:10, flexDirection: 'row', justifyContent: 'space-between'}}> <Text style={{color:'#727272',fontSize:13}}>Lorem</Text> <View style={{flexDirection: 'row'}}> <Icon name="ios-eye" size={18} style={{color:'#727272', marginRight:3}} /> <Text style={{color:'#727272',fontSize:13}}>22</Text> </View> </View> </View> </ScrollView> </SafeAreaView> ); } } const styles = StyleSheet.create({ MainContainer :{ // Setting up View inside content in Vertically center. justifyContent: 'center', flex:1 }, textTitle :{fontSize:22,fontFamily: 'Roboto-M',fontWeight:'700', padding:10}, textOfArticle:{ marginTop:7, fontSize:16, fontFamily: 'Roboto-M' }, postContainer :{ width: Dimensions.get('window').width, height:250, paddingBottom:10, padding:10 }, }); 

À la fin de notre leçon.

Dans la prochaine leçon, nous afficherons les données mysql.

Si vous êtes intéressé par son fonctionnement, allez télécharger cette application, il y aura un onglet Actualités - une application mobile

Mon site Web est http://rapprogtrain.com

Je vk et twitter