Aprende todo lo necesario para crear apps multiplataforma nativas iOS y Android, utilizando Javascript, gracias al framework de Facebook, React Native.
Javascript ahí. > Los controles nativos se mapean a objetos y funciones Javascript. > Appcelerator Titanium. > React Native podría estar dentro de este grupo.
iOS y en Safari. > Desarrolladores iOS pueden interactuar con el directamente. > Diferencia: React ejecuta el código Javascript en un hilo separado, por lo que mejora el rendimiento de la interfaz, sin bloqueos y mayor fluidez en las animaciones.
View } from 'react-native'; class WhyReactNativeIsSoGreat extends Component { render() { return ( <View> <Text> If you like React on the web, you'll like React Native. </Text> <Text> You just use native components like 'View' and 'Text', instead of web components like 'div' and 'span'. </Text> </View> ); } }
ScrollView, Text } from 'react-native'; class AwkwardScrollingImageWithText extends Component { render() { return ( <ScrollView> <Image source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}} /> <Text> On iOS, a React Native ScrollView uses a native UIScrollView. On Android, it uses a native ScrollView. On iOS, a React Native Image uses a native UIImageView. On Android, it uses a native ImageView. React Native wraps the fundamental native components, giving you the performance of a native app, plus the clean design of React. </Text> </ScrollView> ); } }
base es React Native. > Nos permite trabajar a nivel de programación funcional en la construcción de interfaces y que estos reaccionen dinámicamente a través del framework
View } from 'react-native'; import { TheGreatestComponentInTheWorld } from './your-native-code'; class SomethingFast extends Component { render() { return ( <View> <TheGreatestComponentInTheWorld /> <Text> TheGreatestComponentInTheWorld could use native Objective-C, Java, or Swift - the product development process is the same. </Text> </View> ); } }
Así, podremos crear un componente y utilizarlo en diferentes lugares de la app, cambiando sus propiedades. > Tenemos que llamar a this.props dentro de nuestra función render
que van a cambiar > Inicializamos state en el constructor, y después llamamos a setState cuando quieres cambiar el componente. > Estos estados cambiarán en función de algún cambio en el servidor o recibimos algún input por parte del usuario.
Text, View } from 'react-native'; class Blink extends Component { constructor(props) { super(props); this.state = {showText: true}; // Toggle the state every second setInterval(() => { this.setState({ showText: !this.state.showText }); }, 1000); } render() { let display = this.state.showText ? this.props.text : ' '; return ( <Text>{display}</Text> ); } } class BlinkApp extends Component { render() { return ( <View> <Blink text='I love to blink' /> <Blink text='Yes blinking is so great' /> <Blink text='Why did they ever take this out of HTML' /> <Blink text='Look at me look at me look at me' /> </View> ); } } AppRegistry.registerComponent('BlinkApp', () => BlinkApp);
ocupe TODO el espacio disponible. > Este espacio se comparte con el resto de componentes que estén en su mismo nivel. > Cuanto mayor sea el valor flex, mayor será la proporción de espacio que ocupe con respecto a los otros componentes.
View } from 'react-native'; class FlexDimensionsBasics extends Component { render() { return ( // Try removing the `flex: 1` on the parent View. // The parent will not have dimensions, so the children can't expand. // What if you add `height: 300` instead of `flex: 1`? <View style={{flex: 1}}> <View style={{flex: 1, backgroundColor: 'powderblue'}} /> <View style={{flex: 2, backgroundColor: 'skyblue'}} /> <View style={{flex: 3, backgroundColor: 'steelblue'}} /> </View> ); } }; AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
anchura y altura de los elementos que contiene, con el fin de rellenar de la forma más eficiente posible el espacio en blanco y prevenir los desbordes > Flexbox
componentes contenidos se renderizan, aunque no se estén mostrando en ese momento por pantalla. > Si tienes que mostrar muchos elementos utiliza ListView
con contenido diferente, cuentan con una estructura similar. > Ideal para mostrar cantidades grandes de datos. > Sólo renderiza los elementos que se están mostrando en pantalla.
Navigator, Text, View } from 'react-native'; import MyScene from './MyScene'; class SimpleNavigationApp extends Component { render() { return ( <Navigator initialRoute={{ title: 'My Initial Scene', index: 0 }} renderScene={(route, navigator) => <MyScene title={route.title} // Function to call when a new scene should be displayed onForward={ () => { const nextIndex = route.index + 1; navigator.push({ title: 'Scene ' + nextIndex, index: nextIndex, }); }} // Function to call to go back to the previous scene onBack={() => { if (route.index > 0) { navigator.pop(); } }} /> } /> ) } } AppRegistry.registerComponent('SimpleNavigationApp', () => SimpleNavigationApp);
subtags como strong o em <Text> The quick <Text style={{fontStyle: "italic"}}>brown</Text> fox jumped over the lazy <Text style={{fontWeight: "bold"}}>dog</Text>. </Text>
y en apps junto con el texto. > En web, las introducimos mediante HTML con <img> o CSS con propiedades como background-image > En React Native utilizamos el componente <Image>
la la carpeta assets del proyecto en Xcode. > Hay que pasar las imágenes en todas las resoluciones necesarias (@1x, @2x, @3x) y Xcode sirve el asset apropiado dependiendo de la resolución de la pantalla.
la de HTML, Facebook lo hace en alguna app de ejemplo. <Image source={{uri: 'https:// facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />
tener que descargarse todo el contenido cada vez. > Dependes demasiado de su plan de datos. > En la mayoría de los casos, habrá que evitar este enfoque.
componentes, por lo que mejor olvidarnos del modelo HTML-CSS. > Si queremos poner una imagen de fondo: <Image source={require('image!puppies')}> {/* Your content here... */} </Image>
> Utiliza motor V8 de Google. > Compila y ejecuta Javascript a velocidades increíbles. > Código abierto: ejecuta en Windows, macOS y Linux. > Proporciona una manera fácil para construir programas de red escalables.
se puede hacer más rápido. > Las aplicaciones son más rápidas. > Mejor experiencia de usuario. > Menor coste de infraestructura. > Tiene una gran comunidad.
terminal para gestionar el React Packager > Cuando se ejecuta una app React Native, carga la aplicación Javascript desde la siguiente URL. http://localhost:8081/index.ios.bundle
motor que creará la interfaz. class EnpresaDigitala extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> ); } }
EnpresaDigitala que contiene la clase que hemos creado a la ejecución: > De esta forma se crea el punto de entrada y el contenido de la raíz del programa. AppRegistry.registerComponent('EnpresaDigitala', () => EnpresaDigitala);
que se denomina state > Son valores de nuestros componentes > Al modificarlos, hacen que los componentes se vuelvan a renderizar > Siempre utilizar setState para asegurarnos que se renderizan los cambios
como maquetar app, Flexbox puede resultar confuso > Podemos crear función helper, para asignar borde de color a los contenedores y trabajar más fácilmente con ellos.
mediante JavaScriptCore de forma que puedas usarlo en tu app > Ahora Apple deja actualizar apps mediante JavaScriptCore sin pasar por validación App Store
imanolteran
n_takehata
takuya_ohtonari
otakakot
makki_d
daisuketakeda
knakagawa
tomoino
pojiro
taisontsukada
koido
inouehi
chikuwait
pauljervisheath
bluesmoon
morganepeng
thekraken
afnizarnur
mza
iamctodd
eitanlees
tammyeverts
sergeychernyshev
addyosmani
michaelherold
![<View style={[styles.container, this.distinguirContainer('red')]}></View>](https://files.speakerdeck.com/presentations/2fca4b71921c431781691cc4dcc0e0bd/slide_162.jpg){kind=link}
![Imanol Terán Maruri @itermar [email protected]](https://files.speakerdeck.com/presentations/2fca4b71921c431781691cc4dcc0e0bd/slide_178.jpg){kind=link}