Membuat aplikasi seluler di React Native

Halo semuanya. Ini akan menjadi bagian pertama dalam membuat aplikasi seluler kami.

Kami akan melakukan aplikasi seluler menggunakan react asli dan expo. Kami tidak akan membuat aplikasi berita yang bagus. Untuk ini kita akan menggunakan php via api sisanya.

Dalam aplikasi kami, kami akan menampilkan artikel yang akan di phpmyadmin.

Apa itu expo?

Expo, adalah seperangkat alat, perpustakaan, dan layanan yang memungkinkan Anda membuat aplikasi sendiri untuk iOS dan Android menggunakan JavaScript. Kedengarannya menjanjikan. Sederhananya, Expo membantu Anda melihat proyek saat Anda masih mengembangkannya. Expo CLI membuat URL pengembangan (mirip dengan host lokal di Internet) yang dapat Anda buka di klien Expo untuk melihat pratinjau aplikasi.

Instalasi Expo

Sebelum Anda menginstal expo, pastikan Anda menginstal npm.

npm install expo-cli —global 

Instal pameran di iphone

Instal pameran di android


Expo memberi Anda pilihan. Anda dapat melihat pratinjau aplikasi Anda melalui aplikasi klien Expo di perangkat seluler Anda atau menggunakan simulator iOS / Android di komputer Anda. Saat membuat aplikasi, saya menggunakan expo di android.

Membuat aplikasi pameran

 epxo init 

Setelah menginstal Expo, antarmuka Expo CLI terbuka dan memungkinkan Anda untuk memilih nama dan templat proyek. Kami akan memilih halaman kosong.

 cd newsApp expo start —tunnel 

Setelah itu, expo akan meluncurkan server pengembangan lokal, membuka jendela baru untuk melihat server dan memberi Anda kode QR untuk membuka proyek Anda di perangkat seluler Anda. Atau Anda dapat mendaftar di aplikasi seluler dan pameran, dan itu akan secara otomatis menunjukkan perkembangan saat ini di aplikasi seluler.

Untuk memasukkan expo di komputer Anda gunakan perintah ini:

 expo login 

Instal navigasi reaksi

Agar kita dapat beralih dari satu layar ke yang lain, kita perlu mengunduh reaksi-nativation:

 yarn add react-nativation 

Pengembangan dimulai

Sekarang mari kita mulai pengembangan kita.

Hal pertama yang akan kita lakukan adalah membuka App.js (file utama kami).

Tata letak

Untuk membuat aplikasi kita terlihat menarik, kita akan menambahkan beberapa elemen dan menambahkan gaya padanya.

Pertama, tambahkan tajuk:

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

Sekarang mari kita tambahkan blok dengan output artikel dan gaya itu.

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

Saat ini pelajaran kita berakhir.

Dalam pelajaran selanjutnya, kita akan menampilkan data mysql.

Jika Anda tertarik dengan cara kerjanya, buka dan unduh aplikasi ini, akan ada tab berita - aplikasi seluler

Situs web saya adalah http://rapprogtrain.com

Saya vk dan twitter