Download as PDF, PPTX
![{
"remoteModuleConfig":[
// [ $moduleName, $exportedConstants:{}? $methods:[]?, $asyncIndexes:[]? ]
["RCTStatusBarManager",["getHeight","setStyle","setHidden","setNetworkActivityIndicatorVisible"]],
["RCTSourceCode",{"scriptURL":"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"},["getScriptText"],[0]],
["RCTAlertManager",["alertWithArgs"]],
["RCTExceptionsManager",["reportSoftException","reportFatalException","updateExceptionMessage","reportUnhandledException"]],
// ...
]
}
@tadeuzagallo #reactamsterdam](https://image.slidesharecdn.com/react-amsterdam-talk-160418103643/85/React-Native-Internals-21-320.jpg)
![// import React, {
// Component,
// } from 'react';
//
// import {
// AppRegistry,
// Text,
// TouchableHighlight,
// } from 'react-native';
//
// class SampleApp extends Component {
// onPress() {
Alert.alert('Hello, World!', 'Press ok to alert again', [
{ text: 'Ok', onPress() { alert('Ok!') } },
{ text: 'Cancel', onPress() { alert('Cancel') } },
]);
// }
// render() {
// return (
// <TouchableHighlight style={{ margin: 40 }} onPress={this.onPress}>
// <Text>
// Button
// </Text>
// </TouchableHighlight>;
// );
// }
// }
//
// AppRegistry.registerComponent('SampleApp', () => SampleApp);
@tadeuzagallo #reactamsterdam](https://image.slidesharecdn.com/react-amsterdam-talk-160418103643/85/React-Native-Internals-41-320.jpg)
React Native Internals
- 1.
- 2.
- 3.
- 4. WHAT HAPPENS WHEN YOUTYPE A URL INTO YOUR BROWSER AND PRESS ENTER? @tadeuzagallo #reactamsterdam
- 5.
- 6.
- 7. What HAPPENS WHENYOU RUN A React Native APP? @tadeuzagallo #reactamsterdam
- 8.
- 9. ▸ No WebView ▸No HTML ▸ No CSS @tadeuzagallo #reactamsterdam
- 10.
- 11.
- 12.
- 13. import React, { Component, }from 'react'; import { AppRegistry, Text, } from 'react-native'; class SampleApp extends Component { render() { return ( <Text style={{ margin: 40 }}> Hello, World! </Text> ); } } AppRegistry.registerComponent('SampleApp', () => SampleApp); @tadeuzagallo #reactamsterdam
- 14.
- 15.
- 16.
- 17.
- 18. @implementation MyNativeModule + (NSString*)moduleName { return @""; } + (void)load { RCTRegisterModule(self); } @end @tadeuzagallo #reactamsterdam
- 19.
- 20.
- 21. { "remoteModuleConfig":[ // [ $moduleName,$exportedConstants:{}? $methods:[]?, $asyncIndexes:[]? ] ["RCTStatusBarManager",["getHeight","setStyle","setHidden","setNetworkActivityIndicatorVisible"]], ["RCTSourceCode",{"scriptURL":"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"},["getScriptText"],[0]], ["RCTAlertManager",["alertWithArgs"]], ["RCTExceptionsManager",["reportSoftException","reportFatalException","updateExceptionMessage","reportUnhandledException"]], // ... ] } @tadeuzagallo #reactamsterdam
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. // import React,{ // Component, // } from 'react'; // // import { // AppRegistry, // Text, TouchableHighlight, // } from 'react-native'; // // class SampleApp extends Component { onPress() { alert('Hello, World!'); } // render() { // return ( <TouchableHighlight style={{ margin: 40 }} onPress={this.onPress}> <Text> Button </Text> </TouchableHighlight>; // ); // } // } // // AppRegistry.registerComponent('SampleApp', () => SampleApp); @tadeuzagallo #reactamsterdam
- 30.
- 31.
- 32.
- 33.
- 34.
- 35. class SampleApp extendsComponent { onPress() { -> alert('Hello, World!'); } ... } @tadeuzagallo #reactamsterdam
- 36. if (Platform.OS ==='ios') { AlertIOS.alert(title, message, buttons); } else if (Platform.OS === 'android') { AlertAndroid.alert(title, message, buttons); } @tadeuzagallo #reactamsterdam
- 37.
- 38.
- 39.
- 40.
- 41. // import React,{ // Component, // } from 'react'; // // import { // AppRegistry, // Text, // TouchableHighlight, // } from 'react-native'; // // class SampleApp extends Component { // onPress() { Alert.alert('Hello, World!', 'Press ok to alert again', [ { text: 'Ok', onPress() { alert('Ok!') } }, { text: 'Cancel', onPress() { alert('Cancel') } }, ]); // } // render() { // return ( // <TouchableHighlight style={{ margin: 40 }} onPress={this.onPress}> // <Text> // Button // </Text> // </TouchableHighlight>; // ); // } // } // // AppRegistry.registerComponent('SampleApp', () => SampleApp); @tadeuzagallo #reactamsterdam
- 42.
- 43.
- 44.
- 45.