Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
83b5c6d93a1a4124bcee594152b924bc659894de
react-native/blog/page5/index.html
T
Website Deployment Script 4c413e71a4 Deploy website 
Deploy website version based on 861b420b257c82d8c0d993881f2794576f88fb7f
2019-08-05 09:30:53 +00:00

108 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Blog · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A framework for building native apps using React"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Blog · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A framework for building native apps using React"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'auto');
ga('send', 'pageview');
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js"></script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><script type="text/javascript" src="/react-native/js/tabs.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
document.addEventListener('DOMContentLoaded', function() {
addBackToTop(
{"zIndex":100}
)
});
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="blog"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.60</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class="siteNavGroupActive siteNavItemActive"><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><div class="hamburger-menu"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div><h2><i>›</i><span>All Blog Posts</span></h2></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">All Blog Posts</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native/blog/2019/07/17/hermes">Meet Hermes, a new JavaScript Engine optimized for React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2019/07/03/version-60">Announcing React Native 0.60</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2019/06/12/react-native-open-source-update">React Native Open Source Update June 2019</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2019/05/01/react-native-at-f8-and-podcast">React Native at F8 and Open Source Podcast</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2019/03/12/releasing-react-native-059">Releasing React Native 0.59</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2019/03/01/react-native-open-source-update">React Native Open Source Update March 2019</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2019/01/07/state-of-react-native-community">The State of the React Native Community in 2018</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/11/01/oss-roadmap">Open Source Roadmap</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/08/27/wkwebview">Introducing new iOS WebViews</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/08/13/react-native-accessibility-updates">Accessibility API Updates</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/07/04/releasing-react-native-056">Releasing 0.56</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/06/14/state-of-react-native-2018">State of React Native 2018</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/05/07/using-typescript-with-react-native">Using TypeScript with React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/04/09/build-com-app">Built with React Native - The Build.com app</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/03/22/building-input-accessory-view-for-react-native">Building &lt;InputAccessoryView&gt; For React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/03/05/AWS-app-sync">Using AWS with React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/01/18/implementing-twitters-app-loading-animation-in-react-native">Implementing Twitter’s App Loading Animation in React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/01/09/react-native-monthly-6">React Native Monthly #6</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/11/06/react-native-monthly-5">React Native Monthly #5</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/09/21/react-native-monthly-4">React Native Monthly #4</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/08/30/react-native-monthly-3">React Native Monthly #3</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/08/07/react-native-performance-in-marketplace">React Native Performance in Marketplace</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/07/28/react-native-monthly-2">React Native Monthly #2</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/06/21/react-native-monthly-1">React Native Monthly #1</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/03/13/introducing-create-react-native-app">Introducing Create React Native App</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/03/13/idx-the-existential-function">idx: The Existential Function</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/03/13/better-list-views">Better List Views in React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/02/14/using-native-driver-for-animated">Using Native Driver for Animated</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/01/07/monthly-release-cadence">A Monthly Release Cadence: Releasing December and January RC</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/12/05/easier-upgrades">Easier Upgrades Thanks to Git</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/11/08/introducing-button-yarn-and-a-public-roadmap">Introducing Button, Faster Installs with Yarn, and a Public Roadmap</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/10/25/0.36-headless-js-the-keyboard-api-and-more">0.36: Headless JS, the Keyboard API, &amp; more</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/09/08/exponent-talks-unraveling-navigation">Expo Talks: Adam on Unraveling Navigation</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps">Right-to-Left Layout Support For React Native Apps</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/08/12/react-native-meetup-san-francisco">San Francisco Meetup Recap</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/07/06/toward-better-documentation">Toward Better Documentation</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/04/13/react-native-a-year-in-review">React Native: A year in review</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/03/28/dive-into-react-native-performance">Dive into React Native Performance</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/03/24/introducing-hot-reloading">Introducing Hot Reloading</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2015/11/23/making-react-native-apps-accessible">Making React Native apps accessible</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2015/09/14/react-native-for-android">React Native for Android: How we built the first cross-platform React Native app</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2015/03/26/react-native-bringing-modern-web-techniques-to-mobile">React Native: Bringing modern web techniques to mobile</a></li></ul></div></div></section></div><script>
var coll = document.getElementsByClassName('collapsible');
var checkActiveCategory = true;
for (var i = 0; i < coll.length; i++) {
var links = coll[i].nextElementSibling.getElementsByTagName('*');
if (checkActiveCategory){
for (var j = 0; j < links.length; j++) {
if (links[j].classList.contains('navListItemActive')){
coll[i].nextElementSibling.classList.toggle('hide');
coll[i].childNodes[1].classList.toggle('rotate');
checkActiveCategory = false;
break;
}
}
}
coll[i].addEventListener('click', function() {
var arrow = this.childNodes[1];
arrow.classList.toggle('rotate');
var content = this.nextElementSibling;
content.classList.toggle('hide');
});
}
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');
var headings = document.querySelector('.toc-headings');
headings && headings.addEventListener('click', function(event) {
var el = event.target;
while(el !== headings){
if (el.tagName === 'A') {
document.body.classList.remove('tocActive');
break;
} else{
el = el.parentNode;
}
}
}, false);
function createToggler(togglerSelector, targetSelector, className) {
var toggler = document.querySelector(togglerSelector);
var target = document.querySelector(targetSelector);
if (!toggler) {
return;
}
toggler.onclick = function(event) {
event.preventDefault();
target.classList.toggle(className);
};
}
});
</script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="posts"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2015/09/14/react-native-for-android">React Native for Android: How we built the first cross-platform React Native app</a></h1><p class="post-meta">September 14, 2015</p><div class="authorBlock"><p class="post-authorName"><a href="https://www.facebook.com/drwitte" target="_blank" rel="noreferrer noopener">Daniel Witte</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://www.facebook.com/drwitte" target="_blank" rel="noreferrer noopener"><img src="https://graph.facebook.com/210064/picture/?height=200&amp;width=200" alt="Daniel Witte"/></a></div></div></header><article class="post-content"><div><span><p>Earlier this year, we introduced <a href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/">React Native for iOS</a>. React Native brings what developers are used to from React on the web — declarative self-contained UI components and fast development cycles — to the mobile platform, while retaining the speed, fidelity, and feel of native applications. Today, we're happy to release React Native for Android.</p>
<p>At Facebook we've been using React Native in production for over a year now. Almost exactly a year ago, our team set out to develop the <a href="https://www.facebook.com/business/news/ads-manager-app">Ads Manager app</a>. Our goal was to create a new app to let the millions of people who advertise on Facebook manage their accounts and create new ads on the go. It ended up being not only Facebook's first fully React Native app but also the first cross-platform one. In this post, we'd like to share with you how we built this app, how React Native enabled us to move faster, and the lessons we learned.</p>
<footer>
<a href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/" class="btn">Read more</a>
</footer>
<blockquote>
<p>This is an excerpt. Read the rest of the post on <a href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/">Facebook Code</a>.</p>
</blockquote>
</span></div></article></div><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2015/03/26/react-native-bringing-modern-web-techniques-to-mobile">React Native: Bringing modern web techniques to mobile</a></h1><p class="post-meta">March 26, 2015</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/tomocchino" target="_blank" rel="noreferrer noopener">Tom Occhino</a>Engineering Manager at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://github.com/tomocchino" target="_blank" rel="noreferrer noopener"><img src="https://avatars0.githubusercontent.com/u/13947?v=3&amp;s=460" alt="Tom Occhino"/></a></div></div></header><article class="post-content"><div><span><p>We introduced <a href="https://code.facebook.com/projects/176988925806765/react/">React</a> to the world two years ago, and since then it's seen impressive growth, both inside and outside of Facebook. Today, even though no one is forced to use it, new web projects at Facebook are commonly built using React in one form or another, and it's being broadly adopted across the industry. Engineers are choosing to use React every day because it enables them to spend more time focusing on their products and less time fighting with their framework. It wasn't until we'd been building with React for a while, though, that we started to understand what makes it so powerful.</p>
<p>React forces us to break our applications down into discrete components, each representing a single view. These components make it easier to iterate on our products, since we don't need to keep the entire system in our head in order to make changes to one part of it. More important, though, React wraps the DOM's mutative, imperative API with a declarative one, which raises the level of abstraction and simplifies the programming model. What we've found is that when we build with React, our code is a lot more predictable. This predictability makes it so we can iterate more quickly with confidence, and our applications are a lot more reliable as a result. Additionally, it's not only easier to scale our applications when they're built with React, but we've found it's also easier to scale the size of our teams themselves.</p>
<p>Together with the rapid iteration cycle of the web, we've been able to build some awesome products with React, including many components of Facebook.com. Additionally, we've built amazing frameworks in JavaScript on top of React, like <a href="https://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html">Relay</a>, which allows us to greatly simplify our data fetching at scale. Of course, web is only part of the story. Facebook also has widely used Android and iOS apps, which are built on top of disjointed, proprietary technology stacks. Having to build our apps on top of multiple platforms has bifurcated our engineering organization, but that's only one of the things that makes native mobile application development hard.</p>
<footer>
<a href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/" class="btn">Read more</a>
</footer>
<blockquote>
<p>This is an excerpt. Read the rest of the post on <a href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/">Facebook Code</a>.</p>
</blockquote>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev" href="/react-native/blog/page4/">← Prev</a></div></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who&#x27;s using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;
}
// keyCode for '/' (slash)
if (e.keyCode === 191) {
const search = document.getElementById('search_input_react');
search && search.focus();
}
});
</script><script>
var search = docsearch({
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#search_input_react',
algoliaOptions: {"facetFilters":["tags:0.60"],"hitsPerPage":5}
});
</script></body></html>
Reference in New Issue View Git Blame Copy Permalink