Создание новостного мобильного приложения с помощью React Native и Expo

Всем привет. Это будет первой частью в создании нашего мобильного приложения.

Мобильное приложение мы будем делать с помощью React Native и expo. Мы создадим небольшое новостное приложение. Для этого мы будем использовать PHP через rest api.

В нашем приложении мы будем выводить статьи, которые будут находиться в phpmyadmin.

Expo, представляет собой набор инструментов, библиотек и сервисов, которые позволяют создавать собственные приложения для iOS и Android с помощью JavaScript. Звучит многообещающе. Проще говоря, Expo помогает вам просматривать проекты, пока вы еще их разрабатываете. Expo CLI создает URL-адрес для разработки (аналогичный локальному хосту в Интернете), который затем можно открыть в клиенте Expo для предварительного просмотра приложения.

Перед тем, как установить expo, убедитесь что вы установили npm.

npm install expo-cli —global

Установить expo на iphone

Установить expo на android

Expo дает вам варианты. Вы можете предварительно просмотреть свое приложение через клиентское приложение Expo на своем мобильном устройстве или с помощью симулятора iOS / Android на своем компьютере. Я при создании приложения использовал expo на android.

epxo init

После установки Expo открывается интерфейс Expo CLI и позволяет выбрать имя проекта и шаблон. Мы выберем пустую страницу.

cd newsApp expo start —tunnel

После этого, expo запустит локальный сервер разработки, откроет новое окно для просмотра сервера и предоставит вам QR-код, чтобы открыть ваш проект на вашем мобильном устройстве. Либо вы можете зарегистрироваться в мобильном приложении и expo cli, и он в мобильном приложение автоматически покажет текущие разработки.

Чтобы войти в expo на вашем компьютере используйте эту команду:

expo login

Чтобы мы могли переходить с одного экрана на другой, нам нужно скачать react-nativation:

yarn add react-nativation

Теперь давайте начнем нашу разработку.

Первое, что мы сделаем — это откроем App.js (наш главный файл).

Чтобы наше приложение выглядело привлекательным, мы добавим пару элементов и добавим к ним стили.Сначала добавим заголовок:

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

Теперь давайте добавим блок с выводом статей и стилизуем его.

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

На этой наш урок заканчивается.

В следующем уроке мы сделаем вывод данных mysql.

Если вам интересно, как все получиться перейдите и скачайте это приложение, там будет вкладка с новостями — мобильное приложение

Мой сайт — http://rapprogtrain.com

Я вк и твиттере

Создание новостного мобильного приложения с помощью React Native и Expo

Что такое expo?

Установка Expo

Создание expo приложения

Установка react-navigation

Начало разработки

Верстка