React Native - Historial de revisió

Joan: /* Generació del APK */

2022-06-02T06:40:08Z

Generació del APK

Joan: /* Navigating between screens: React Navigation */

2022-04-29T21:17:03Z

Navigating between screens: React Navigation

Joan: /* Navigating between screens: React Navigation */

2022-04-29T16:35:45Z

Navigating between screens: React Navigation

Joan: /* Navigating between screens: React Navigation */

2022-04-29T14:34:21Z

Navigating between screens: React Navigation

Joan: /* Problemes */

2022-04-28T21:43:33Z

Problemes

Joan: /* Problemes */

2020-05-09T13:54:06Z

Problemes

Pàgina nova

=Introducció=
*https://reactnative.dev/
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:
<pre>
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
</pre>
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=
*https://reactnative.dev/docs/environment-setup

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:
<pre>
$ node --version
v8.10.0
</pre>
Per actualitzar farem servir NVM: Node Version Manager
*https://stackoverflow.com/questions/10075990/upgrading-node-js-to-latest-version
<pre>
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
$ nvm install v12.16.1
...
</pre>
Note: you may need to close & re-open your terminal window for nvm command to be available.
<pre>
$ node --version
v12.16.1
</pre>
A més també tinc una versió actualitzada de npm:
<pre>
$ npm --version
6.13.4
</pre>
Assuming that you have Node 12 LTS or greater installed, you can use npm to install the Expo CLI command line utility:
<pre>
$ npm install -g expo-cli
</pre>
Then run the following commands to create a new React Native project called "AwesomeProject":
<pre>
$ expo init AwesomeProject

$ cd AwesomeProject
$ npm start # you can also use: expo start
</pre>
I ara ja tenim el nostre projecte funcionant a
*http://localhost:19002/
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'''.
<pre>
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.
</pre>
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''':
<pre>
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',
},
});
</pre>
==Problemes==
*Missatge: ''packager is not running at port 80''
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.
*Missatge: Error: ENOSPC: System limit for number of file watchers reached
S'ha solucionat fent:
<pre>
$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
</pre>
*És una tonteria, però recordar que el mòbil i el portàtil han d'estar en la mateixa xarxa. És a dir, que he de tenir la wifi del mòbil activada (m'ha passat i ja em tornava mico...)

=Generació del APK=
Abans de continuar amb el tutorial, m'interessa obtenir el apk:
*https://docs.expo.io/versions/latest/distribution/building-standalone-apps/
<pre>
$ expo build:android -t apk
make a new Expo account -> això ho faré la primera vegada, he te tenir un compte a Expo
</pre>
Hem de crear un compte a ''expo.io''. Les meves credencials:
<pre>
joanqc@gmail.com
joanillo_reactnative
jq*******
</pre>
I ara el primer que hem de fer és actualitzar el fitxer ''app.json'' amb les dades del paquet Android:
<pre>
"android": {
"package": "org.joanillo.AwesomeProject",
"versionCode": 1
}
</pre>
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).
<pre>
$ expo build:android -t apk
...
✔ Build finished.
Successfully built standalone app: https://expo.io/artifacts/364b811b-85f2-4d08-9988-38183661c09e
</pre>
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:
*https://stackoverflow.com/questions/49993006/how-to-reduce-the-size-of-an-expo-react-native-app-on-android

=Getting started=
*https://reactnative.dev/docs/getting-started
<pre>
$ expo init reactnative-tutorial
$ cd reactnative-tutorial
</pre>
De moment desenvoluparé via web, que és més còmode, sense necessitat del mòbil:
<pre>
$ npm run web
</pre>
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'':
<pre>
export default function App2() {
...
}
</pre>
Aquest punt d'entrada està definit a ''node_modules/expo/AppEntry.js'':
<pre>
import App from '../../App';

registerRootComponent(App);
</pre>
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''):
<pre>
import App from '../../App2';

registerRootComponent(App);
</pre>

==Navigating between screens: React Navigation==
<pre>
$ npm install @react-navigation/native @react-navigation/stack
</pre>
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:
<pre>
$ expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
</pre>
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:
<pre>
import 'react-native-gesture-handler';
</pre>
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:
<pre>
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>
);
}
</pre>

Anem a crear una app amb dues pantalles: Now you can create an app with a home screen and a profile screen:
<pre>
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>
);
}
</pre>
<pre>
function HomeScreen({navigation}) {
return (
<Button
title="Go to Jane's profile"
onPress={() => navigation.navigate('Profile', {name: 'Jane'})}
/>
);
}
</pre>
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:
<pre>
import {NavigationContainer} from '@react-navigation/native';
</pre>
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:
*https://reactnavigation.org/docs/getting-started/

{{Autor}}, abril 2020

@@ Línia 262: / Línia 262: @@
 *https://reactnavigation.org/docs/getting-started/
 *https://reactnavigation.org/docs/navigating
 {{Autor}}, abril 2020, abril 2022

@@ Línia 261: / Línia 261: @@
 Però en aquest document que segueixo només ho comenta de passada, per entendre com funciona s'ha d'anar (com es comenta) a:
 *https://reactnavigation.org/docs/getting-started/
+*https://reactnavigation.org/docs/navigating
 {{Autor}}, abril 2020, abril 2022

← Versió més antiga		Revisió del 14:34, 29 abr 2022
Línia 263:		Línia 263:


−	{{Autor}}, abril 2020	+	{{Autor}}, abril 2020, abril 2022

@@ Línia 161: / Línia 161: @@
 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:
 *https://stackoverflow.com/questions/49993006/how-to-reduce-the-size-of-an-expo-react-native-app-on-android
 =Getting started=

@@ Línia 119: / Línia 119: @@
 $ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
 </pre>
-*És una tonteria, però recordar que el mòbil i el portàtil han d'estar en la mateixa xarxa. És a dir, que he de tenir la wifi del mòbil activada (m'ha passat i ja em tornava mico...)
+*És una tonteria, però recordar que el mòbil i el portàtil han d'estar en la mateixa xarxa. És a dir, que he de tenir la wifi del mòbil activada (m'ha passat i ja em tornava mico...). No cal connectar el mòbil amb cable, amb la wifi n'hi ha prou.
 =Generació del APK=