Мобиле

Зароните у Реацт Нативе за Андроид развој



Пре неколико година, мој колега ми је рекао за Реацт Нативе. Био сам врло скептичан. Тврдио сам да је то само још један међуплатформски оквир који никада неће успети у стварном животу - мало сам знао колико сам погрешио.

шта је јавасцрипт чвор

Пролазиле су године и Реацт Нативе вештине постале су веома тражене. Будући да је прошло неко време када сам научио нешто ново, помислио сам зашто не бих покушао? Данас сам велики заговорник Реацт Нативе-а.



Против:



  • Не можете више да користите Андроид Студио
  • Реацт Нативе не може да се користи за сваку апликацију или функцију
  • Реацт Нативе је нови оквир и ажурирања могу негативно утицати на вашу тренутну базу кодова
  • ЈаваСцрипт није строго откуцан језик
  • Реацт Нативе захтева покретање ЈаваСцрипт механизма, што га може учинити мање перформансним

Прос:



  • Лако научити
  • Заједничка база кодова између Андроид и иОС апликација, са само мањим подешавањима која су потребна како би се подударала са искуствима платформе
  • Претовар уживо и вруће, што значи да нема више бесконачних времена израде
  • Изворне компоненте за обе платформе
  • Стално се побољшава
  • Заједница која активно расте
  • Огроман број библиотека
  • Екпо уклања потребу за поседовањем Мац-а за развој за иОС
  • Смањење ресурса радне снаге - иако ће вам можда још требати неки локални / Андроид развојни систем, то ће бити ретко.

Могу да наставим и даље, али зауставимо се овде и пређимо на тему овог поста на блогу. У овом посту ћу створити четири Андроид апликације на Реацт Нативе:

  1. Основни бројач са тастерима за повећавање и смањивање бројача
  2. Апликација за претраживање подредита р / пицс
  3. Генеричка страница за пријављивање
  4. Апликација за прегледање подредита р / пицс

ОВДЕ

Као што сам горе поменуо, никако не можемо да користимо Андроид Студио за Реацт Нативе развој. Треба нам замена. Реацт Нативе се може развити вероватно у било ком савременом уређивачу текста (Атом, ВС Цоде, Сублиме Тект, Брацкетс, итд.), Али пошто долазимо са Андроид Студио искуством, мој омиљени ВебСторм је направљен од исте компаније. Иако се ВебСторм плаћа (129 УСД годишње), можете да инсталирате њену верзију за рани приступ. ЕАП израда ВебСторма је бесплатна и прилично стабилна. Ако више волите уређивач који је потпуно бесплатан, идите на ВС Цоде. Мицрософт је чак за њега развио невероватан додатак Реацт Нативе и делује веома добро.



Креирање новог пројекта

Предуслови: Андроид СДК, Ноде и Реацт Нативе инсталирани на рачунару.

Постоје два начина за стварање новог Реацт Нативе пројекта.



  1. Конвенционалан начин. Или са ВебСторм ГУИ или са наредбом терминала: react-native init AwesomeApeeScapeProject
  2. Једноставнији начин „Направи Реацт Нативе Апп“. create-react-native-app AwesomeApeeScapeProject

Ако користите create-react-native-app, креирани пројекат ће се покренути помоћу екпо-а. Нећу улазити у детаље, али у основи то значи да немате потребу за инсталирањем Ксцоде-а за покретање апликације на иОС-у. Такође је лакше да клијент буде увек у току путем функције екпо.ио и неких других функција. Али не можете да додате изворни код. Стога, ако развијате одређену функцију, можда ћете морати да избаците апликацију из екпо-а и уместо ње користите уобичајени Реацт Нативе пројекат.

Користићу прву методу.



Покренимо пројекат. Прво отворите емулатор или повежите уређај. Ако сте пројекат креирали са ВебСторм ГУИ, све што требате је одабрати конфигурацију. У горњем десном углу ВебСторма кликните падајући мени лево од дугмета Покрени, одаберите Андроид и кликните Покрени или Отклони грешке. Ако сте пројекат креирали помоћу терминала, можете додати нову Реацт Нативе конфигурацију или га покренути помоћу терминала:

cd AwesomeApeeScapeProject react-native run-android

Ако је све прошло у реду, дочекаће вас следећи екран:



Генерирани распоред

Структура и основно подешавање

Значајне ставке унутар пројекта су:

  • андроид - Андроид Студио пројекат унапред конфигурисан са подршком за Реацт Нативе.
  • иос - Ксцоде пројекат унапред конфигурисан са подршком за Реацт Нативе.
  • ноде_модулес - Фасцикла која садржи Реацт Нативе фрамеворк и друге Јавасцрипт библиотеке.
  • индек.јс - Улазна тачка за нашу апликацију.
  • Апп.јс - Учитана је почетна компонента.

Направимо директоријум „срц“ унутар корена пројекта и преселимо Апп.јс тамо. Морате да ажурирате индек.јс импорт тако да се подудара са новом локацијом Апп.јс.



import App from './src/App';

Избришите све унутар Апп.јс и налепите овај код:

import React from 'react'; import {Text} from 'react-native'; export default class App extends React.Component { render() { return ( Hello TopTal ); } }

Код који смо налепили је прилично једноставан. Направили смо класу App (дете од React.Component) које поништава render() метода и враћа Text саставни део. React.Component је основна класа за изградњу корисничког интерфејса помоћу ЈСКС-а. Тхе export default модификатор чини класу public.

Сада смо спремни да започнемо са дизајнирањем нашег изгледа.

Изглед са Флекбок-ом

Flexbox је слично LinearLayout, али Flexbox превазилази могућности LinearLayout

Овај фрагмент ЈСКС-а:

flex: 1

Приказује овај изглед:

Генерирани распоред

Иако овај КСМЛ:

android:layout_width='match_parent' android:layout_height='match_parent'

Приказује ово:

Генерирани распоред

ЈСКС код делује познато, а ?! Направимо „речник“ (или табеларни лист) за изгледе користећи сличне сличне у ЈСКС и Андроид КСМЛ-у.

Имајте на уму да функционалности нису нужно једнаке. Покушавам да помогнем Реацт Нативе почетницима да схвате идеју система изгледа у Реацт Нативе-у. Молимо вас да погледате службени водич за детаљне информације.

Узмите у обзир ово ЈСКС својство:

flexDirection

То је еквивалентно овоме:

alignItems

Овај фрагмент ЈСКС-а:

justifyContent

А овај КСМЛ:

flexDirection: row',

Обоје генеришу овај излаз:

Генерирани распоред

Слично томе, овај ЈСКС:

works on Y axis and

А овај КСМЛ:

works on X axis. Everything is mirrored for

Генериши ово:

Генерирани распоред

Да бисмо постигли прави положај унутар контејнера, најчешће користимо комбинацију justifyContent, alignItems и justifyContent својства.

Овај ЈСКС:

space-around

А овај КСМЛ:

space-between

Даће овај изглед:

Генерирани распоред

Овај ЈСКС:

space-evenly

И овај КСМЛ

state

Даће овај изглед:

Генерирани распоред

Овај ЈСКС:

state

А овај КСМЛ:

render()

Даће овај изглед:

Генерирани распоред

Овај ЈСКС:

import React from 'react'; import {Button, Text, View} from 'react-native'; export default class App extends React.Component { /* Initialize state object with variable 'number' set to 0 and variable name with value of empty string */ state = {number: 0}; render() { return ( this.decrement()}/> {/* Text will be automatically updated whenever state.number has changed value */} Value = {this.state.number} this.increment()}/> ); } //Declaration of decrement function decrement() { //To update the state we need invoke this.setState //with new value for variable 'number' this.setState({number: this.state.number - 1}); } increment() { this.setState({number: this.state.number + 1}); } }

и овај КСМЛ:

textView.setText('Value ' + number)

Даће овај изглед:

Генерирани распоред

Лекција коју треба научити: ако имамо yarn алигнИтемс yarn add axios јустифиЦонтент npm флекДирецтион: цолумн '- npm install axios утиче на осу И и import React from 'react'; import { TextInput, View, Text, Image, ActivityIndicator, Platform, StyleSheet } from 'react-native'; import axios from 'axios'; TextInput = EditText, ActivityIndicator = ProgressBar Platform - Platform detecting module StyleSheet - Module for creating stylesheets and moving them away from JSX утичу на И осу.

јустифиЦонтент: 'флек-старт' гравитација = 'старт | лево'
алигнИтемс: 'флек-старт' гравитација = 'старт | лево'
јустифиЦонтент: 'флек-енд' гравитација = 'крај | десно'
алигнИтемс: 'флек-енд' гравитација = 'крај | десно'

Покушајте сами. Постави export default class App extends React.Component { } вредност у state = {text: '', loading: false, error: null, imgUrl: null}; , TextInput и Image.

Управљање државом

За ажурирање стања апликације користићете Реацт'с render() { return ( //Predefined style. See below {/* returnKeyType ~ imeOptions onSubmitEditing ~ et.OnEditorActionListener */} this.setState({text})} onSubmitEditing={() => this.searchPicture()}/> {/* Render error Image component if this.state.imgUrl is not equal to null */} { this.state.imgUrl && } ); } променљива. Кад год onChangeText={(text) => this.setState({text})} onSubmitEditing={() => this.searchPicture()} { this.state.imgUrl && } се ажурира, EditText се позива.

Копирајте доњи код у своју апликацију:

TextWatcher Коначна апликација за претрагу Реддит

Ако кликнете на дугмад ДЕЦРЕМЕНТ и ИНЦРЕМЕНТ, видећете да се текст аутоматски ажурира за вас. Нема потребе за експлицитном употребом et.OnEditorActionListener.

Функционалност државе је корисна из више разлога:

  • Једноставност добијања вредности - увек знате где и како добити вредност за одређену променљиву.
  • Подаци нису везани за одређене виџете.
  • Имати више виџета који зависе од заједничке промене вредности.

Прављење апликације за претрагу за / р / слике

Сад кад смо се упознали са основама, креирајмо нешто мало сложеније: апликацију за претрагу за / р / пицс. Реддит пружа директну крајњу тачку ЈСОН АПИ-ја, тако да нећемо морати да идемо на бочне задатке да бисмо проверили аутентичност како би исправно функционисао.

Реацт Нативе пружа уграђени Фетцх АПИ. Будући да је већина нас вероватно навикла Ретрофит и његову једноставност употребе, користићемо акиос . Можете инсталирати акиос преко команде терминала

користећи searchPicture() (Мој омиљени метод):

imgUrl

или користећи this.state.imgUrl:

0

Увоз:

false

Направите класу:

null

Да иницијализује стање. Требаће нам:

  • лоадинг - За приказ траке напретка.
  • грешка - да покаже да ли је дошло до неке грешке приликом подношења захтева за РЕСТ АПИ.
  • имгУрл - За преглед претраживане слике.
  • текст - упит за претрагу.
undefined

Додајте ЈСКС код. Имамо вертикални распоред са searchPicture() { //Default state this.setState({loading: true, error: null, imgUrl: null}); axios.get('https://www.reddit.com/r/pics/search.json', { params: { //the get param map restrict_sr: 'on', //search only /r/pics limit: 1, //limit to one search item sort: 'new', //sort by creation date q: this.state.text //our search query } }).then(response => { //promise is resolved and 'then' block is triggered //set state with new values this.setState({ imgUrl: response.data.data.children[0] .data.preview.images[0].source.url, error: null, loading: false }) }).catch(error => {//Some error occurred //set error this.setState({error: error.message, loading: false, imgUrl: null}) }) } и ActivityIndicator компоненте.

Image

Нове ствари:

{ //Separate method this.renderProgress() } {/* Render error Text component if this.state.error is not equal to null */} { this.state.error && {this.state.error} }

Прва метода ради слично као render() са renderProgress() { //If this.state.loading is true //return View containing a progressbar //View takes style array if (this.state.loading === true) { return ( ); } } саставни део. Будимо искрени, много је лепше у Реацт Нативе-у.

Други метод се позива када се притисне тастер за повратак на тастатури (App) након што активира const styles = StyleSheet.create({ containerStyle: { flexDirection: 'column', flex: 1, //Since React Native is cross platform //let's handle both platforms. //Add top margin to fix status bar overlap marginTop: Platform.OS === 'ios' ? 20 : 0, }, textInputStyle: { marginLeft: 16, marginRight: 16, height: Platform.OS === 'ios' ? 30 : undefined } }); .

Слика се приказује када TextInput није нулл или недефинисан јер оператор ‘&&’ не проверава други аргумент ако је први већ нетачан.

Можда се питате зашто autoFocus={true} prop је лажно. Па, када користите логичке операторе у ЈаваСцрипт-у, све осим ‘’ (празан низ), TextInput, ref={ref => this.searchInput = ref}, componentDidMount() или componentDidMount(){ this.searchInput.focus(); } су истините. Нема потребе за одређеном провером.

constructor()

Идемо. Апликација би требало да ради како се сада очекује. Унесите низ за претрагу и притисните ретурн.

Табела животног циклуса компонената

Пошто је и наша апликација спремна за приказ static _getDerivedStateFromProps_(props, state) и грешке, треба да додамо још кода после render() саставни део:

componentDidMount()

Компоненте за приказивање можете да преместите изван главног shouldComponentUpdate(nextProps, nextState) метода, такође:

render()

Остали су само стилови. Ставите их изван getSnapshotBeforeUpdate(prevProps, prevState) класа.

componentDidUpdate(prevProps, prevState, snapshot)

Сада можемо додати још подешавања попут аутоматског отварања меке тастатуре када се апликација покрене.

Имајте на уму да постоји лакши начин да render() направите аутоматски фокусира (componentWillUnmount()), али зарад овог примера нећемо га користити.

Додајте референцу на React.Component са реквизитом:

./src

И замени CardView.js метода животног циклуса попут ове:

import React from 'react'; import {View} from 'react-native'; export default CardView = (props) => { return ( //Style will be merged from default containerStyle //and props.style. props.style attributes will override //values if parameters are same. {/* props.children contain subviews add this line if the component is container */} {props.children} ); }; const styles = { containerStyle: { borderRadius: 4, margin: 5, padding: 5, elevation: 5, shadowColor: 'black', shadowRadius: 5, shadowOpacity: 0.5, shadowOffset: {width: 0, height: 3}, backgroundColor: 'white' } };

Поново учитајте апликацију и тастатура се аутоматски отвара за нас.

Методе животног циклуса компонената

Компоненту смо већ створили, али идемо кроз живот компоненте.

Ево протока животног циклуса компаније Реацт:

  • LoginForm - Конструктор се увек позива када се апликација покрене
  • CardView - Позвано пре приказивања и након ажурирања. Враћа објект за ажурирање стања. Вратите нулу да ништа не ажурирате.
  • import React from 'react'; import {TextInput, Platform, Button, StyleSheet} from 'react-native'; import CardView from '../common/components/CardView'; export default class LoginForm extends React._Component _{ render() { return ( //Override default style console.log('onLoginPress')} buttonStyle={styles.buttonStyle}/> ); } } const styles = StyleSheet.create({ buttonStyle: { elevation: 5, height: 40 }, textInputStyle: { padding: 10, //Additional params to make //iOS inputs prettier ...Platform.select({ ios: { borderRadius: 2, marginTop: 5, backgroundColor: '#eeeeee' } }) } }); - Рендер је потребан за сваку класу Реацт Цомпонент. Користи се за приказивање приказа.
  • LoginForm - Позива се након што је компонента приказана и монтирана на стабло приказа.
  • App - Позвано након промене стања или реквизита. Повратак је подразумевано враћен на труе након сваког ажурирања стања. Позива View ако се врати тачно.
  • react-navigation - Позван непосредно пре него што се изврши генерирани излаз.
  • yarn - Позван након приказивања новог ажурирања. Не позива се након првог npm.
  • axios - Позван непосредно пре демонтаже и уништавања компоненте.

Коначно генерисана апликација за пријаву

Компоненте за вишекратну употребу

Често морамо да стварамо компоненте за вишекратну употребу када радимо на пројекту. Постоје два начина за стварање компоненте:

  1. Креирање класе која се протеже yarn. Ову методу треба користити ако су нам потребне методе животног циклуса.
  2. Писањем функције која враћа Виев за једноставнију синтаксу.

Пошто смо већ креирали класе компонената, креирајмо функцију за ову инстанцу.

Претпоставимо да нам треба аналогни са. Направите „уобичајену“ фасциклу под npm именик.

Направи PictureList.js:.

import React from 'react'; import { ActivityIndicator, FlatList, Image, Text, TouchableHighlight, View } from 'react-native'; import axios from 'axios'; import CardView from '../common/CardView'; export default class PictureList extends React.Component { state = {loading: true, error: null, posts: null}; componentDidMount() { axios.get('https://www.reddit.com/r/pics.json') .then(response => { this.setState({ posts: response.data.data.children, loading: false }) }).catch(error => { this.setState({ error: error.message, loading: false }) }) } render() { return ( // FlatList ~ ListView // data - DataSource for the List // renderItem - function returns View item // keyExtractor - Unique id for items {this.state.posts && (item.data.id + '')}/>} {this.state.loading && } ); } navigateToPicture(title, url) { this.props.navigation.navigate('PicturePreview', { 'title': title, 'url': url }) } renderItem(item) { //Destructuring values from item //Read more 'ES6 destructuring' const {data} = item.item; const {title} = data; const {url} = data.preview.images[0].source; return ( //Clickable view this.navigateToPicture(title, url)}> {/Reusing our CardView/} {title} ) } }

PicturePreview.js користећи наш нови import React from 'react'; import {Image} from 'react-native'; export default class PicturePreview extends React.Component { //Destructure navigation //Set title to header static _navigationOptions = ({navigation}) => ({ title: navigation.state.params.title }); render() { const {url} = this.props.navigation.state.params; return () } } изглед:

navigationOptions

Увезите StackNavigation класе у import React from 'react'; import {createStackNavigator} from 'react-navigation'; import PictureList from './components/PictureList'; import PicturePreview from './components/PicturePreview'; export default class App extends React.Component { render() { return ( ); } } //Customize the header_ const NavigationOptions = { headerTintColor: '#fff', headerStyle: { backgroundColor: '#f4511e', } }; //Create the router. const Router = createStackNavigator({ //Name the screen 'PictureList': { //Link the Component screen: PictureList, //Additional navigation options navigationOptions: { title: '/r/pics Browser', ...NavigationOptions } }, 'PicturePreview': { screen: PicturePreview, navigationOptions: NavigationOptions } }, { //Root initialRouterName: 'PictureList' } ); класе и умотајте је са 

|_+_|

|_+_|

Ако подесите параметре у стиловима, можете добити нешто што изгледа много лепше.

Апликација за коначно прегледање на Андроид-у

Навигација различитим сценама је битан део већине апликација. Направићемо апликацију прегледача Реддит / р / пицс.

Креирање навигације у Реацт Нативе-у је прилично једноставно.

Предуслови

  • Инсталирајте 
    |_+_|
    са 
     или 
    •  
  • Инсталирајте 
    |_+_|
     са 
    |_+_|
     или 
    •  
 
Почнимо са стварањем две различите компоненте.
 
 Напомена: Већина доњег кода би вам већ требала бити позната. Залепићу цео разред. 
 
:
Тхе 
 аутоматски ће се позвати Реацт-Навигатион.
 
Сада пређимо на Апп.јс 
 
 Напомена: У Реацт-Навигатион постоји много типова навигације. Данас ћемо се фокусирати на 
. Детаљне информације потражите на службеној веб страници. 
Као што видите, све што треба да урадимо је да креирамо навигациони рутер и направимо апликација приказати га. Ако је све прошло у реду, имаћемо функционалну апликацију прегледача Реддит / р / пицс.
 
 Андроид: 
 
 Апликација за коначно прегледање у иОС-у
 
 иОС:   
 
Реацт Нативе је невероватно!
 
Од када сам почео да програмирам, имам искључиво мобилна развојна искуства. Али сада са Реацт-ом могу да кодирам скоро све: мобилне уређаје, рачунаре и веб.
 
Ако одлучите да започнете развој следеће невероватне апликације помоћу Реацт Нативе , видећете да ту и тамо има својих хирова и неких грешака, али Реацт Нативе је врло функционалан и идеалан за већину пројеката.
  Повезан:   Направите КР скенер: Водич за реактивну камеру  
Разумевање основа
 
Шта подразумевате под ИДЕ?
Интегрисано развојно окружење или уређивач кода.
Које апликације користе Реацт Нативе?
Многе популарне апликације користе Реацт Нативе, укључујући Фацебоок, Тесла, Скипе, Инстаграм, Убер итд.
Који програмски језик користи Реацт Нативе?
ЈаваСцрипт
Како постављате кориснички интерфејс у ​​Реацт Нативе?
Флекбок је начин креирања изгледа у Реацт Нативе-у.
Да ли је Реацт Нативе изворни или хибридни?
Укратко, ни једно ни друго. Програмирање кода за Реацт Нативе, а то је ЈаваСцрипт, заправо није компајлирано у Јава или Свифт / Објецтиве Ц. Дакле, и даље му је потребан ЈаваСцрипт механизам за покретање. Међутим, УИ користи изворне компоненте, тако да је изворно за кориснички интерфејс.
Да ли је Реацт Нативе оквир?
Да. Реацт Нативе је оквир за изградњу апликација које имају Нативе УИ.

                    
                

            

        

    

    
    
    

        

            

                

                    

                        

                            
Прототип са лакоћом - Водич за ИнВисион Студио

                            
Алати И Упутства

                            
                        

                        

                            Прототип са лакоћом - Водич за ИнВисион Студио
                        

                    

                

                

                    

                        

                            Уметност терена за прикупљање средстава
                        

                        

                            
Уметност терена за прикупљање средстава

                            
Инвеститори И Финансирање