Como você pode criar um aplicativo de celular local com React Native [Tutorial]

O React Native foi desenvolvido pelo Fb, juntamente com as cepas do framework React. Em vez de renderizar partes para o DOM de um navegador, React Native ( RN ) invoca APIs nativas para criar partes internas que podem ser tratadas por meio de seu código JS. Existem algumas variações entre as partes padrão do HTML e as partes do RN, porém elas não parecem ser muito trabalhosas de vencer. Com este dispositivo, você pode estar realmente construindo um aplicativo local que se parece e se comporta exatamente como outro utilitário nativo, além de usar apenas uma linguagem, JS, para cada versão do Android e iOS.

Este texto foi retirado do livro eletrônico  Trendy JavaScript Internet Improvement Cookbook  de Federico Kereki. Este e-book é uma combinação ideal de opções para o desenvolvimento convencional do JavaScript e áreas da moda que os desenvolvedores recentemente exploraram com o JavaScript. Essas informações de solução de problemas ensinam estratégias comuns de correção de problemas para JavaScript em servidores, navegadores, celulares e desktops. Para cumprir com os exemplos aplicados neste artigo, você poderá obter o código do repositório GitHub do livro eletrônico .

Neste artigo, veremos como configurar e usar o React Native para construir um utilitário de célula. Veremos até como adicionar instrumentos de crescimento como ESLint, Circulate e Prettier.

Organizando um utilitário RN

Existem 3 maneiras de configurar um utilitário RN: manualmente, o que você não precisa fazer; em segundo lugar, com pacotes, utilizando a react-native-cliinterface de linha de comando; ou, finalmente, utilizando um pacote semelhante a  create-react-native-app (ou CRAN).

Começamos obtendo um utilitário de linha de comando, que pode abranger vários pacotes diferentes:

npm configure create-react-native-app -g

Depois disso, podemos criar e executar um empreendimento fácil com apenas três instruções:

create-react-native-app yourprojectname 
cd yourprojectname 
npm begin

A forma como funciona…

Sempre que você executa seu aplicativo, ele inicia um servidor em sua máquina, na porta 19000ou 19001, ao qual você se conectará usando o Expoutilitário. Você pode baixar o Expo em seu site oficial , que está disponível para Android ou iOS. Configure-o seguindo as instruções na tela:

Sempre que você abrir o Expoaplicativo pela primeira vez, ele aparecerá como na próxima captura de tela:

Observe que tanto o celular quanto sua máquina devem estar na mesma comunidade nativa, e sua máquina também deve permitir conexões com portas 19000e 19001; você terá que mudar seu firewall para que isso funcione.

Depois de usar a opção Scan QR Code, haverá alguma sincronização e, em breve, você verá seu código principal funcionando sem problemas:

Além disso, se você alterar o App.jscódigo de fornecimento, os ajustes serão imediatamente espelhados em seu dispositivo, o que significa que tudo está bem! Para garantir que isso ocorra, agite o telefone para permitir o menu de depuração e verifique se Reside Reload e Scorching Reloading estão ativados. Além disso, você precisará de depuração JS distante para mais tarde. Seu celular deve ter a seguinte aparência:

Incluindo instrumentos de crescimento

Posteriormente, temos que adicionar todos os instrumentos de evento necessários. Precisamos ter ESLint para verificação de código, Prettier para formatação e Circulate para variedades de informações. O CRAN cuida junto com Babel e Jest, então não temos que fazer nada por esses dois.

Como você pode fazer isso…

Ao contrário do React, onde temos que adicionar um rewiringpacote específico com a intenção de trabalhar com configurações específicas, no RN, podemos simplesmente adicionar alguns pacotes e informações de configuração e podemos prosseguir.

Incluindo ESLint

Para ESLint, teremos uma lista de pacotes que desejamos:

npm set up --save-dev 
eslint eslint-config-recommended eslint-plugin-babel 
eslint-plugin-flowtype eslint-plugin-react eslint-plugin-react-native

Exigiremos um .eslintrcarquivo separado, como no caso de React. Os conteúdos adequados abrangem o seguinte:

{
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersão": 2017,
        "sourceType": "módulo",
        "ecmaFeatures": {
            "jsx": verdadeiro
        }
    },
    "ambiente": {
        "nó": verdadeiro,
        "navegador": verdadeiro,
        "es6": verdadeiro,
        "brincadeira": verdade,
        "nativo de reação/nativo de reação": verdadeiro
    },
    "estende": [
        "eslint:recomendado",
        "plugin:flowtype/recomendado",
        "plug-in: reagir/recomendado",
        "plugin: react-native/all"
    ],
    "plugins": ["babel", "flowtype", "react", "react-native" ],
    "diretrizes": {
        "sem console": "desligado",
        "no-var": "erro",
        "prefer-const": "erro",
        "flowtype/no-types-missing-file-annotation": 0
    }
}

Incluindo Circular

Feito isso,  ESLintestá pronto para reconhecer nosso código, porém temos que configurar Circulatetambém:

npm set up --save-dev move flow-bin flow-coverage-report flow-typed

Teremos que adicionar algumas tensões à scriptsparte de bundle.json:

"scripts": {
    "begin": "começar os scripts nativos de reação",
    .
    .
    .
    "move": "move", 
    "addTypes": "configuração de tipo de fluxo" 
},

Então, temos que inicializar os diretórios de trabalho de  Circulate:

npm executar mover init

O conteúdo do .flowconfigarquivo aparece assim:

[ignore]
.*/node_modules/.*
[include]

[libs]

[lints]
all=warn
untyped-type-import=off
unsafe-getters-setters=off

[options]
include_warnings=true

[strict]

Incluindo mais bonita

Não há muito o que colocar Prettier, tudo o que queremos é um npmcomando, mais o .prettierrcarquivo. Para o anterior, basta usar o próximo comando:

npm configurado --save-dev mais bonito

Para configuração, podemos usar o conteúdo deste .prettierrcarquivo:

{
    "tabWidth": 4,
    "largura da impressão": 75
}

A forma como funciona…

Vamos verificar se está tudo bem. Começaremos verificando o App.jsarquivo que foi criado pelo CRAN e poderemos confirmar instantaneamente se os instrumentos funcionam – porque um problema foi detectado! Dê uma olhada na captura de tela a seguir:

A regra que falha é uma nova, de  eslint-plugin-react-native:  no-color-literals, porque estamos usando constantes no estilo, o que pode se revelar uma dor de cabeça de manutenção mais cedo ou mais tarde. Esclareceremos isso incluindo uma variável e usaremos uma declaração de tipo para garantir que o Circulate esteja funcionando. O novo código deve ser o seguinte:

// Supply file: App.authentic.mounted.js
/* @move */

import React from "react";
import { StyleSheet, Textual content, View } from "react-native";

export default class App extends React.Element<> {
render() {
return (
<View type={kinds.container}>
<Textual content>Open up App.js to begin working in your app!</Textual content>
<Textual content>Adjustments you make will routinely reload.</Textual content>
<Textual content>Shake your cellphone to open the developer menu.</Textual content>
</View>
);
}
}

const white: string = "#fff";

const kinds = StyleSheet.create({
container: {
flex: 1,
backgroundColor: white,
alignItems: "heart",
justifyContent: "heart"
}
});

Utilizando partes nativas

Trabalhar com RN pode ser muito semelhante a trabalhar com React – há partes, estado, adereços, eventos do ciclo de vida e assim por diante – mas há uma diferença fundamental: suas próprias partes não serão baseadas principalmente em HTML, mas em RN específico uns. Por exemplo, você não está usando <div>componentes, mas moderadamente  <View> , que serão mapeados pelo RN para UIViewiOS ou Android.View para Android.

Preparando

Começaremos com uma instância da página da web de países e áreas, que você encontrará no repositório GitHub do livro . Já que estamos utilizando PropTypes, vamos querer esse pacote. Configure-o com o próximo comando:

npm configurar prop-types --save

Então, teremos que colocar alguns pacotes, começando com Redux e kin. Na verdade, o CRAN já contém reduxe react-redux, portanto, não os queremos, mas redux-thunknão está incluído. Vamos configurá-lo utilizando o próximo comando:

npm set up react react-redux redux-thunk --save

Estaremos utilizando até mesmo axiospara chamadas assíncronas:

npm configurar axios --salvar

Nossa etapa restante será executar o código do servidor (você o encontrará no repositório GitHub ) para que nosso aplicativo tenha a capacidade de fazer chamadas assíncronas. Depois de baixar o código do servidor do repositório GitHub, vá para a listagem e simplesmente digite o próximo comando:

node out/restful_server.js.

Vamos agora ver como podemos modificar nosso código para torná-lo aplicável ao RN.

Como você pode fazer isso…

Como o RN faz uso de suas partes pessoais, sua experiência em HTML será de pouca utilidade. Aqui, veremos alguns ajustes, mas com a intenção de obter todas as vantagens de todas as perspectivas do RN, você terá que revisar suas partes por conta própria.

Vamos começar com o <RegionsTable>elemento, que é moderadamente fácil:

// Supply file: src/regionsApp/regionsTable.element.js
.
.
.

render() {
if (this.props.record.size === 0) {
return (
<View>
<Textual content>No areas.</Textual content>
</View>
);
} else {
const ordered = [...this.props.list].kind(
(a, b) => (a.regionName < b.regionName ? -1 : 1)
);

return (
<View>
{ordered.map(x => (
<View key={x.countryCode + "-" + x.regionCode}>
<Textual content>{x.regionName}</Textual content>
</View>
))}
</View>
);
}
}

Descubra que não há ajustes no restante do elemento, e todas as suas informações do React continuam a ser legítimas; você simplesmente precisa regular a saída de sua metodologia de renderização.

Em seguida, alteraremos o <CountrySelect>elemento a ser usado  <Picker>, que é semelhante, mas precisaremos de algumas alterações adicionais. Vamos verificar nosso elemento, destacando os componentes onde os ajustes são necessários:

// Supply file: src/regionsApp/countrySelect.element.js
/* @move */

import React from "react";
import PropTypes from "prop-types";
import { View, Textual content, Picker } from "react-native";

export class CountrySelect extends React.PureComponent<{
dispatch: ({}) => any
}> {
static propTypes = {
loading: PropTypes.bool.isRequired,
currentCountry: PropTypes.string.isRequired,
record: PropTypes.arrayOf(PropTypes.object).isRequired,
onSelect: PropTypes.func.isRequired,
getCountries: PropTypes.func.isRequired
};

componentDidMount() {
if (this.props.record.size === 0) {
this.props.getCountries();
}
}

onSelect = worth => this.props.onSelect(worth);

render() {
if (this.props.loading) {
return (
<View>
<Textual content>Loading nations...</Textual content>
</View>
);
} else {
const sortedCountries = [...this.props.list].kind(
(a, b) => (a.countryName < b.countryName ? -1 : 1)
);

return (
<View>
<Textual content>Nation:</Textual content>
<Picker
onValueChange={this.onSelect}
immediate="Nation"
selectedValue={this.props.currentCountry}
>
<Picker.Merchandise
key={"00"}
label={"Choose a rustic:"}
worth={""}
/>
{sortedCountries.map(x => (
<Picker.Merchandise
key={x.countryCode}
label={x.countryName}
worth={x.countryCode}
/>
))}
</Picker>
</View>
);
}
}
}

Muitos ajustes! Vamos passá-los na ordem em que acontecem:

• Uma mudança repentina: se você quiser que um <Picker> elemento mostre seu valor atual, precisará definir sua selectedValuepropriedade; em qualquer outro caso, mesmo quando a pessoa seleciona um rústico, o troco recebido não aparece na tela. Teremos que oferecer um acessório adicional, currentCountryque obteremos da loja, para que possamos usá-lo selectedValuepara nosso registro.
• A ocasião de despedida quando a pessoa seleciona um valor pode ser completamente diferente; o manipulador do evento deve ser referido como imediatamente com o valor escolhido, em vez de com um evento para trabalhar occasion.goal.worth.
• Agora temos que trocar o <choose>ingrediente por <Picker>, e fornecer um immediatesuporte de conteúdo textual que será usado quando o registro expandido for comprovado na tela.
• Agora temos que fazer uso de <Merchandise>peças para as escolhas da pessoa, lembrando que o labela ser exibido agora é um adereço.

Não vamos esquecer a mudança ao conectar o registro de nações à loja; Teremos apenas para adicionar uma propriedade adicional ao getProps()desempenho:

// Supply file: src/regionsApp/countrySelect.linked.js
const getProps = state => ({
record: state.nations,
currentCountry: state.currentCountry,
loading: state.loadingCountries
});

Agora, tudo o que precisamos fazer é ver como o aplicativo principal está pronto. Nosso App.jscódigo deve ser bastante fácil:

// Supply file: App.js
/* @move */

import React from "react";
import { Supplier } from "react-redux";

import { retailer } from "./src/regionsApp/retailer";
import { Foremost } from "./src/regionsApp/most important";

export default class App extends React.PureComponent<> {
render() {
return (
<Supplier retailer={retailer}>
<Foremost />
</Supplier>
);
}
}

Isso é bastante fácil. O restante da configuração estará dentro do most important.jsarquivo, que contém algumas particularidades que chamam a atenção:

// Supply file: src/regionsApp/most important.js
/* @move */

import React from "react";
import { View, StatusBar } from "react-native";

import {
ConnectedCountrySelect,
ConnectedRegionsTable
} from ".";

export class Foremost extends React.PureComponent<> {
render() {
return (
<View>
<StatusBar hidden />
<ConnectedCountrySelect />
<ConnectedRegionsTable />
</View>
);
}
}

Além da utilização de <View>onde já havíamos usado <div>(uma mudança à qual é melhor já estar acostumado), há um elemento adicional: não precisamos da barra de apoio para apontar, então usamos o <StatusBar>ingrediente , e certifique-se de cobri-lo.

A forma como funciona…

Apenas para seleção, em vez de usar meu telefone celular, como fiz anteriormente neste artigo, decidi usar um dispositivo emulado. Depois de iniciar o aparelho com npm begin, iniciei meu gadget e logo adquiri o seguinte:

Se a pessoa tocar no <Picker>ingrediente, um pop-up será exibido, listando os países que foram obtidos de nosso servidor Node, conforme mostrado na captura de tela a seguir:

Quando a pessoa realmente dá torneiras em um rústico, o onValueChangeevento é acionado e, após chamar o servidor, é exibido o registro das áreas, conforme abaixo:

Todas as coisas funcionam e estão utilizando partes nativas; legal! A propósito, se você não foi muito positivo em relação à selectedValuedesvantagem que descrevemos, simplesmente omita esse suporte e, quando a pessoa escolher um rústico, você obterá um resultado final ruim:

Este texto guiou você pela configuração e organização do método React Native e diferentes instrumentos de crescimento para criar o modelo de célula de um aplicativo de internet.

Se você achou este artigo útil, experimente o e-book,  Trendy JavaScript Internet Improvement Cookbook . Você descobrirá maneiras de criar funções de célula nativas para  Android  e  iOS  com React Native, construir funções de Internet do lado do cliente utilizando React e Redux e muito mais.

Aprenda a seguir

React Native 0.59 RC0 agora com React Hooks e extras

O grupo React Native compartilha seu roteiro de fornecimento aberto, React Suite atinge 3.4.0

Como você pode criar um utilitário de desktop com o Electron [Tutorial]