React Native 101

Carlos Fernández Llamas
Development Advisor @ Plain Concepts

BilboStack 2016

¿Qué es

React Native?

Arquitectura de React Native

React

React Native

React-DOM

JavaScriptCore

Operating System

*JS Engine

WebView

Native Android UI

Native iOS UI

"Escribe una vez, ejecuta donde quieras"

"Aprende una vez, escribe donde quieras"

Demo

Entorno de ejecución

Sin depuración

Con depuración

JavaScriptCore

V8

Fetch API

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

Accesibilidad

<TouchableOpacity
    accessible={true}
    accessibilityLabel={'Tap me!'}
    onPress={this._onPress}>
      <View style={styles.button}>
        <Text style={styles.buttonText}>
            Press me!
        </Text>
      </View>
</TouchableOpacity>

Testing (con Jest)

// __tests__/sum-test.js
jest.dontMock('../sum');

describe('sum', function() {
 it('adds 1 + 2 to equal 3', function() {
   var sum = require('../sum');
   expect(sum(1, 2)).toBe(3);
 });
});

Animations

<Animated.Image
    source={{uri: 'http://.../img.jpg'}}
    style={{
        flex: 1,
        transform: [
            {scale: this.state.bounceValue},
        ]
    }}
/>
...
this.state.bounceValue.setValue(1.5);
Animated.spring(
  this.state.bounceValue,
  {
    toValue: 0.8,
    friction: 1,
  }
).start();

¿Qué necesito?

¿Será mantenido por Facebook?

¿Preguntas?

¡Muchas Gracias!

Carlos Fernández Llamas
Development Advisor @ Plain Concepts

BilboStack 2016

React Native 101

By Carlos Fernández

React Native 101

Charla de React Native para BilboStack 2016

  • 582
Loading comments...

More from Carlos Fernández