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
1cf8d4cea341c8a914ceabfa85d5218efe1dbe21
react-native/docs/upgrading.html
T
Travis CI 606e61cc0b update website
2016-02-05 03:04:57 +00:00

20 lines
19 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><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Upgrading – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Upgrading – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li><li><a href="https://github.com/facebook/react-native/releases" class="">Releases</a></li><li><a href="http://reactnative.cc" class="">Newsletter</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/android-setup.html#content">Android Setup</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linux-windows-support.html#content">Linux and Windows Support</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/images.html#content">Images</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/animations.html#content">Animations</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/accessibility.html#content">Accessibility</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/direct-manipulation.html#content">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/javascript-environment.html#content">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator-comparison.html#content">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/known-issues.html#content">Known Issues</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/performance.html#content">Performance</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/upgrading.html#content">Upgrading</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/platform-specific-code.html#content">Platform Specific Code</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/native-modules-ios.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/native-components-ios.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries-ios.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/running-on-device-ios.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/embedded-app-ios.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/communication-ios.html#content">Communication between native and React Native</a></li></ul></div><div class="nav-docs-section"><h3>Guides (Android)</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/native-modules-android.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/native-components-android.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/running-on-device-android.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/embedded-app-android.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/signed-apk-android.html#content">Generating Signed APK</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/android-ui-performance.html#content">Profiling Android UI Performance</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/android-building-from-source.html#content">Building React Native from source</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/drawerlayoutandroid.html#content">DrawerLayoutAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/modal.html#content">Modal</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/picker.html#content">Picker</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/progressbarandroid.html#content">ProgressBarAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/progressviewios.html#content">ProgressViewIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pulltorefreshviewandroid.html#content">PullToRefreshViewAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/refreshcontrol.html#content">RefreshControl</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/segmentedcontrolios.html#content">SegmentedControlIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/statusbar.html#content">StatusBar</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switch.html#content">Switch</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios-item.html#content">TabBarIOS.Item</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/toolbarandroid.html#content">ToolbarAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablenativefeedback.html#content">TouchableNativeFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/viewpagerandroid.html#content">ViewPagerAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/actionsheetios.html#content">ActionSheetIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/alert.html#content">Alert</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/alertios.html#content">AlertIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/animated.html#content">Animated</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appregistry.html#content">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appstateios.html#content">AppStateIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appstate.html#content">AppState</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/asyncstorage.html#content">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/backandroid.html#content">BackAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/cameraroll.html#content">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/dimensions.html#content">Dimensions</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/intentandroid.html#content">IntentAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/interactionmanager.html#content">InteractionManager</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/layoutanimation.html#content">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking.html#content">Linking</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linkingios.html#content">LinkingIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemethodsmixin.html#content">NativeMethodsMixin</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/netinfo.html#content">NetInfo</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/panresponder.html#content">PanResponder</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pixelratio.html#content">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pushnotificationios.html#content">PushNotificationIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/statusbarios.html#content">StatusBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/stylesheet.html#content">StyleSheet</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/toastandroid.html#content">ToastAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/vibrationios.html#content">VibrationIOS</a></li></ul></div><div class="nav-docs-section"><h3>Polyfills</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/flexbox.html#content">Flexbox</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/shadowproptypesios.html#content">ShadowPropTypesIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/geolocation.html#content">Geolocation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/network.html#content">Network</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/timers.html#content">Timers</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/colors.html#content">Colors</a></li></ul></div></div><div class="inner-content"><a id="content"></a><table width="100%"><tbody><tr><td><h1><a class="anchor" name="upgrading"></a>Upgrading <a class="hash-link" href="#upgrading">#</a></h1></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/docs/Upgrading.md">Edit on GitHub</a></td></tr></tbody></table><div><p>Upgrading to new versions of React Native will give you access to more APIs, views, developer tools
and other goodies. Because React Native projects are essentially made up of an Android project, an
iOS project and a JavaScript project, all combined under an npm package, upgrading can be rather
tricky. But we try to make it easy for you. Here&#x27;s what you need to do to upgrade from an older
version of React Native:</p><h2><a class="anchor" name="1-upgrade-the-react-native-dependency"></a>1. Upgrade the <code>react-native</code> dependency <a class="hash-link" href="#1-upgrade-the-react-native-dependency">#</a></h2><p>Note the latest version of the <code>react-native</code> npm package from here (or use <code>npm info react-native</code> to check):</p><ul><li><a href="https://www.npmjs.com/package/react-native">https://www.npmjs.com/package/react-native</a></li></ul><p>Now install that version of <code>react-native</code> in your project with <code>npm install --save</code>. For example, to upgrade to the version <code>0.18</code>, in a terminal run:</p><div class="prism language-javascript">$ npm install <span class="token operator">--</span>save react<span class="token operator">-</span>native@<span class="token number">0.18</span></div><h2><a class="anchor" name="2-upgrade-your-project-templates"></a>2. Upgrade your project templates <a class="hash-link" href="#2-upgrade-your-project-templates">#</a></h2><p>The new npm package will likely contain updates to the files that are normally generated when you
run <code>react-native init</code>, like the iOS and the Android sub-projects. To get these latest changes,
run this in a terminal:</p><div class="prism language-javascript">$ react<span class="token operator">-</span>native upgrade</div><p>This will check your files against the latest template and perform the following:</p><ul><li>If there is a new file in the template, it is simply created.</li><li>If a file in the template is identical to your file, it is skipped.</li><li>If a file is different in your project than the template, you will be prompted; you have options
to view a diff between your file and the template file, keep your file or overwrite it with the
template version. If you are unsure, press <code>h</code> to get a list of possible commands.</li></ul><h1><a class="anchor" name="manual-upgrades"></a>Manual Upgrades <a class="hash-link" href="#manual-upgrades">#</a></h1><p>Xcode project format is pretty complex and sometimes it&#x27;s tricky to upgrade and merge new changes.</p><h3><a class="anchor" name="from-0-13-to-0-14"></a>From 0.13 to 0.14 <a class="hash-link" href="#from-0-13-to-0-14">#</a></h3><p>The major change in this version happened to the CLI (<a href="https://github.com/facebook/react-native/releases/tag/v0.14.0-rc" target="_blank">see changelog</a>) and static images (<a href="http://facebook.github.io/react-native/docs/images.html" target="_blank">see docs</a>). To use the new asset system in existing Xcode project, do the following:</p><p>Add new &quot;Run Script&quot; step to your project&#x27;s build phases:</p><p><img src="https://cloud.githubusercontent.com/assets/192222/11050044/871bf926-86f7-11e5-8908-736106457bcb.png" alt=""></p><p>Set the script to</p><div class="prism language-javascript"><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token operator">/</span>node_modules<span class="token operator">/</span>react<span class="token operator">-</span>native<span class="token operator">/</span>packager<span class="token operator">/</span>react<span class="token operator">-</span>native<span class="token operator">-</span>xcode<span class="token punctuation">.</span>sh</div><p><img src="https://cloud.githubusercontent.com/assets/192222/11050052/8f098252-86f7-11e5-994a-364aabbaa7d1.png" alt=""></p><p>Move main.jsbundle to Trash (it will be generated automatically by Xcode using the script above)</p><p><img src="https://cloud.githubusercontent.com/assets/192222/11050104/f3d025e2-86f7-11e5-9101-a4622236338d.png" alt=""></p><p>If you installed Node via nvm, you might experience &quot;react-native: command not found&quot;. See <a href="https://github.com/facebook/react-native/issues/3974" target="_blank">issues/3974</a> for workaround and <a href="https://github.com/facebook/react-native/pull/4015" target="_blank">pull/4015</a> for the fix.</p></div><div class="docs-prevnext"><a class="docs-next" href="platform-specific-code.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script src="/react-native/js/scripts.js"></script></body></html>
Reference in New Issue View Git Blame Copy Permalink