![{
"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)
More Related Content
Viewers also liked (20)
React Native Internals
- 4. WHAT HAPPENS WHEN YOU TYPE A URL INTO YOUR BROWSER AND PRESS ENTER? @tadeuzagallo #reactamsterdam
- 7. What HAPPENS WHEN YOU RUN A React Native APP? @tadeuzagallo #reactamsterdam
- 9. ? No WebView ? No HTML ? No CSS @tadeuzagallo #reactamsterdam
- 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
- 18. @implementation MyNativeModule + (NSString *)moduleName { return @""; } + (void)load { RCTRegisterModule(self); } @end @tadeuzagallo #reactamsterdam
- 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
- 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
- 35. class SampleApp extends Component { 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
- 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