Создание мобильного приложения на React Native

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

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

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

Что такое expo?

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

Установка Expo

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

npm install expo-cli —global

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

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


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

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

epxo init

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

cd newsApp

expo start —tunnel

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

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

expo login

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

Чтобы мы могли переходить с одного экрана на другой, нам нужно скачать 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

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