React Native

De Wikijoan
Dreceres ràpides: navegació, cerca

Contingut

Introducció

Amb React també podem fer aplicacions natives per a Android i iOS: React Native.

Recordem que React només és la part de front-end. Si vull la part de servidor (ja sigui amb React o ReactNative), necessito Node (i/o Express). Això no treu que React (i Reactnative) funcionen amb Node.

Instal·lació. Previ

Així no ho farem de moment:

cd /home/joan/M06_WEC_1920/UF2/
$ npx react-native init MyTestApp

Welcome to React Native!                
                 Learn once, write anywhere               

✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing dependencies

  Run instructions for iOS:
    • cd "/home/joan/M06_WEC_1920/UF2/MyTestApp" && npx react-native run-ios
    - or -
    • Open MyTestApp/ios/MyTestApp.xcodeproj in Xcode or run "xed -b ios"
    • Hit the Run button

  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd /home/joan/M06_WEC_1920/UF2/MyTestApp && npx react-native run-android

Jo de moment no vull instal·lar el Android Studio, que inclou el Android emulator. Recordem que el Android Studio està associat a JAVA i al JDK. No ho faré així, ho faré amb Expo. Per veure com es fa, hem d'anar al Setting up the development environment

Setting up the development environment

If you are new to mobile development, the easiest way to get started is with Expo CLI. Expo is a set of tools built around React Native and, while it has many features, the most relevant feature for us right now is that it can get you writing a React Native app within minutes. You will only need a recent version of Node.js and a phone or emulator.

Hi ha dues possibilitats: Expo CLI i React Native CLI. Expo CLI és més senzill de configurar i programar. En canvi React Native CLI necessita instal·lar el Android Studio, emulador, etc.

Expo CLI Quickstart

Necessita Node 12 LTS. Jo tinc:

$ node --version
v8.10.0

Per actualitzar farem servir NVM: Node Version Manager

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
$ nvm install v12.16.1
...

Note: you may need to close & re-open your terminal window for nvm command to be available.

$ node --version
v12.16.1

A més també tinc una versió actualitzada de npm:

$ npm --version
6.13.4

Assuming that you have Node 12 LTS or greater installed, you can use npm to install the Expo CLI command line utility:

$ npm install -g expo-cli

Then run the following commands to create a new React Native project called "AwesomeProject":

$ expo init AwesomeProject

$ cd AwesomeProject
$ npm start # you can also use: expo start

I ara ja tenim el nostre projecte funcionant a

Però compte, aquesta url no és l'aplicació, sinó que ens mostra informació de log i el codi QR que hem d'escanejar en el mòbil. En el mòbil he d'instal·lar l'app de Expo.

 To run the app with live reloading, choose one of:
  • Scan the QR code above with the Expo app (Android) or the Camera app (iOS).
  • Press a for Android emulator, or w to run on web.
  • Press e to send a link to your phone with email.
  • Press s to sign in and enable more options.

 Expo  Press ? to show a list of all available commands.
Logs for your project will appear below. Press Ctrl+C to exit.

Efectivament, instal·lo l'app en el mòbil, escanejo el codi QR des de l'app de Expo, i ja em funciona l'aplicació (en viu).

Modifying your app

Now that you have successfully run the app, let's modify it. Open App.js in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.

script App.js:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Problemes

M'ha portat molt de lio aquest missatge. No em funcionava allò que m'havia funcionat dies enrera. I el tema és que s'havia quedat un procés de node obert, i per tant el port ja estava ocupat, i intentava obrir l'aplicació en el port 80 (però no s'espera que sigui aquest port). I en el mòbil no hi havia manera de que funcionés l'aplicatiu.

S'ha solucionat fent:

$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Generació del APK

Abans de continuar amb el tutorial, m'interessa obtenir el apk:

$ expo build:android -t apk
make a new Expo account -> això ho faré la primera vegada, he te tenir un compte a Expo

Hem de crear un compte a expo.io. Les meves credencials:

joanqc@gmail.com
joanillo_reactnative
jq*******

I ara el primer que hem de fer és actualitzar el fitxer app.json amb les dades del paquet Android:

    "android": {
      "package": "org.joanillo.AwesomeProject",
      "versionCode": 1
    }

Tornem a generar el build. Aquesta és la part interessant, perquè el build és genera en el servidor. La nostra tasca es posa a la cua, i depenent de la càrrega dels servidors pot trigar més o menys (a mi la primera prova ha trigat una hora fins que s'ha pogut fer el build).

$ expo build:android -t apk
...
✔ Build finished.
Successfully built standalone app: https://expo.io/artifacts/364b811b-85f2-4d08-9988-38183661c09e

I d'aquest enllaç em puc descarregar el apk de l'aplicació, copiar-la al mòbil i instal·lar-lam i funciona correctament.

El tamany del APK generat amb Expo és bastant gran. I eś que Expo està pensat per a desenvolupament i no per producció. Si es vol reduir el tamany s'ha d'anar a l'alternativa a Expo: react-native. Mirar:

Getting started

$ expo init reactnative-tutorial
$ cd reactnative-tutorial

De moment desenvoluparé via web, que és més còmode, sense necessitat del mòbil:

$ npm run web

Ara ja puc fer un tutorial per fer qualsevol cosa més interessant. Però allò principal és que ens basem en tots els conceptes de React.

El punt d'entrada de l'aplicació és el script App.js, on es defineix i s'exporta la classe App:

export default function App2() {
...
}

Aquest punt d'entrada està definit a node_modules/expo/AppEntry.js:

import App from '../../App';

registerRootComponent(App);

Si vull tenir un altre punt d'entrada, només cal definir el script App2.js i importar aquest script (la classe prinipal pot continuar dient-se App):

import App from '../../App2';

registerRootComponent(App);

Navigating between screens: React Navigation

$ npm install @react-navigation/native @react-navigation/stack

Next, install the required peer dependencies. You need to run different commands depending on whether your project is an Expo managed project or a bare React Native project.

If you have an Expo managed project (com és el meu cas), install the dependencies with expo:

$ expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

To finalize installation of react-native-gesture-handler, add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js:

import 'react-native-gesture-handler';

Now, you need to wrap the whole app in NavigationContainer. Usually you'd do this in your entry file, such as index.js or App.js:

import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

Anem a crear una app amb dues pantalles: Now you can create an app with a home screen and a profile screen:

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{title: 'Welcome'}}
        />
        <Stack.Screen name="Profile" component={Profile} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
function HomeScreen({navigation}) {
  return (
    <Button
      title="Go to Jane's profile"
      onPress={() => navigation.navigate('Profile', {name: 'Jane'})}
    />
  );
}

He fet funcionar la navegació entre pantalles en els exemples App24.js i App25.js (en el mòbil, perquè a la web no funciona perquè no existeix el concepte de navegació entre pantalles). La línia:

import {NavigationContainer} from '@react-navigation/native';

fa que només funcioni en el mòbil de forma nativa.

Però en aquest document que segueixo només ho comenta de passada, per entendre com funciona s'ha d'anar (com es comenta) a:



creat per Joan Quintana Compte, abril 2020

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines