Erstellen einer mobilen Anwendung in React Native

Hallo an alle. Dies ist der erste Teil bei der Erstellung unserer mobilen Anwendung.

Wir werden eine mobile Anwendung mit React Native und Expo erstellen. Wir werden keine großartige Nachrichtenanwendung erstellen. Dafür werden wir PHP via Rest API verwenden.

In unserer Anwendung werden Artikel angezeigt, die in phpmyadmin enthalten sind.

Was ist eine Ausstellung?

Expo ist eine Reihe von Tools, Bibliotheken und Diensten, mit denen Sie mithilfe von JavaScript Ihre eigenen Anwendungen für iOS und Android erstellen können. Das klingt vielversprechend. Mit Expo können Sie Projekte anzeigen, während Sie sie noch entwickeln. Die Expo-CLI erstellt eine Entwicklungs-URL (ähnlich einem lokalen Host im Internet), die Sie dann im Expo-Client öffnen können, um eine Vorschau der Anwendung anzuzeigen.

Expo Installation

Stellen Sie vor der Installation von expo sicher, dass Sie npm installieren.

npm install expo-cli —global 

Installieren Sie expo auf dem iPhone

Installieren Sie Expo auf Android


Expo bietet Ihnen Optionen. Sie können eine Vorschau Ihrer Anwendung über die Expo-Client-Anwendung auf Ihrem Mobilgerät oder mithilfe des iOS / Android-Simulators auf Ihrem Computer anzeigen. Beim Erstellen der Anwendung habe ich expo auf Android verwendet.

Erstellen einer Expo-Anwendung

 epxo init 

Nach der Installation von Expo wird die Expo-CLI-Oberfläche geöffnet und Sie können den Projektnamen und die Vorlage auswählen. Wir werden eine leere Seite auswählen.

 cd newsApp expo start —tunnel 

Danach startet expo den lokalen Entwicklungsserver, öffnet ein neues Fenster zum Anzeigen des Servers und stellt Ihnen einen QR-Code zum Öffnen Ihres Projekts auf Ihrem mobilen Gerät zur Verfügung. Oder Sie können sich in der mobilen Anwendung und in der Messe registrieren und es werden automatisch die aktuellen Entwicklungen in der mobilen Anwendung angezeigt.

Verwenden Sie diesen Befehl, um die Ausstellung auf Ihrem Computer aufzurufen:

 expo login 

Installieren Sie die React-Navigation

Damit wir von einem Bildschirm zum anderen wechseln können, müssen wir React-Nativation herunterladen:

 yarn add react-nativation 

Entwicklungsstart

Beginnen wir jetzt mit unserer Entwicklung.

Als erstes öffnen wir App.js (unsere Hauptdatei).

Layout

Damit unsere Anwendung attraktiv aussieht, fügen wir einige Elemente hinzu und fügen ihnen Stile hinzu.

Fügen Sie zuerst den Header hinzu:

 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}, }); 

Fügen wir nun einen Block mit der Ausgabe von Artikeln hinzu und formatieren ihn.

 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 }, }); 

Damit endet unsere Lektion.

In der nächsten Lektion werden wir die MySQL-Daten ausgeben.

Wenn Sie daran interessiert sind, wie es funktioniert, laden Sie diese Anwendung herunter. Es wird eine Registerkarte "Nachrichten" angezeigt - eine mobile Anwendung

Meine Website ist http://rapprogtrain.com

Ich vk und twitter