mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Travis CI
59 lines
21 KiB
HTML
59 lines
21 KiB
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="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="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></ul><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/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/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemodulesios.html#content">Native Modules (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativecomponentsios.html#content">Native UI Components (iOS)</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries.html#content">Linking Libraries</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/runningondevice.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/embedded-app.html#content">Integration with Existing App</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/javascript-environment.html#content">JavaScript Environment</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/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/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/scrollview.html#content">ScrollView</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/switchios.html#content">SwitchIOS</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/touchablehighlight.html#content">TouchableHighlight</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/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/alertios.html#content">AlertIOS</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/asyncstorage.html#content">AsyncStorage</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/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/linkingios.html#content">LinkingIOS</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/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/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></ul></div></div><div class="inner-content"><a id="content"></a><h1>Integration with Existing App</h1><div><p>Since React makes no assumptions about the rest of your technology stack – it’s commonly noted as simply the <code>V</code> in <code>MVC</code> – it’s easily embeddable within an existing non-React Native app. In fact, it integrates with other best practice community tools like <a href="http://cocoapods.org/" target="_blank">CocoaPods</a>.</p><h2><a class="anchor" name="requirements"></a>Requirements <a class="hash-link" href="#requirements">#</a></h2><ul><li><a href="http://cocoapods.org/" target="_blank">CocoaPods</a> – <code>gem install cocoapods</code></li><li><a href="http://nodejs.org" target="_blank">Node.js</a> – <code>brew install node</code></li></ul><h2><a class="anchor" name="install-react-native-using-cocoapods"></a>Install React Native Using CocoaPods <a class="hash-link" href="#install-react-native-using-cocoapods">#</a></h2><p><a href="http://cocoapods.org/" target="_blank">CocoaPods</a> is a package management tool for iOS/Mac development. We need to use it to download React Native. If you haven't install CocoaPods yet, checkout <a href="http://guides.cocoapods.org/using/getting-started.html" target="_blank">this tutorial</a>.</p><p>When you are ready to work with CocoaPods, add the following line to <code>Podfile</code>. If you don't have one, then create it under the root directory of your project.</p><div class="prism language-javascript">pod <span class="token string">'React'</span>
|
||
pod <span class="token string">'React/RCTText'</span>
|
||
# Add any subspecs you want to use <span class="token keyword">in</span> your project</div><p>Remember to install all subspecs you need. The <code><Text></code> element cannot be used without <code>pod 'React/RCTText'</code>.</p><p>Then install your pods:</p><div class="prism language-javascript">$ pod install</div><h2><a class="anchor" name="create-your-react-native-app"></a>Create Your React Native App <a class="hash-link" href="#create-your-react-native-app">#</a></h2><p>There are two pieces you’ll need to set up:</p><ol><li>The root JavaScript file that will contain your actual React Native app and other components</li><li>Wrapper Objective-C code that will load up your script and create a <code>RCTRootView</code> to display and manage your React Native components</li></ol><p>First, create a directory for your app’s React code and create a simple <code>index.ios.js</code> file:</p><div class="prism language-javascript">$ mkdir ReactComponent
|
||
$ touch ReactComponent<span class="token operator">/</span>index<span class="token punctuation">.</span>ios<span class="token punctuation">.</span>js</div><p>Copy & paste following starter code for <code>index.ios.js</code> – it’s a barebones React Native app:</p><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">var</span> <span class="token punctuation">{</span>
|
||
Text<span class="token punctuation">,</span>
|
||
View
|
||
<span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">var</span> styles <span class="token operator">=</span> React<span class="token punctuation">.</span>StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||
container<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
class <span class="token class-name">SimpleApp</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
<span class="token function">render<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">></span>
|
||
<Text<span class="token operator">></span>This is a simple application<span class="token punctuation">.</span><<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
React<span class="token punctuation">.</span>AppRegistry<span class="token punctuation">.</span><span class="token function">registerComponent<span class="token punctuation">(</span></span><span class="token string">'SimpleApp'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> SimpleApp<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p><code>SimpleApp</code> will be your <strong>module name</strong>, which will be used later on.</p><h2><a class="anchor" name="add-container-view-to-your-app"></a>Add Container View To Your App <a class="hash-link" href="#add-container-view-to-your-app">#</a></h2><p>You should now add a container view for the React Native component. It can be any <code>UIView</code> in your app.</p><p><img src="/react-native/img/EmbeddedAppContainerViewExample.png" alt="Container view example"></p><p>However, let's subclass <code>UIView</code> for the sake of clean code. Let's name it <code>ReactView</code>. Open up <code>Yourproject.xcworkspace</code> and create a new class <code>ReactView</code> (You can name it whatever you like :)).</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// ReactView.h
|
||
</span>
|
||
#import <UIKit<span class="token operator">/</span>UIKit<span class="token punctuation">.</span>h<span class="token operator">></span>
|
||
@interface <span class="token class-name">ReactView</span> <span class="token punctuation">:</span> UIView
|
||
@end</div><p>In a view controller that wants to manage this view, go ahead and add an outlet and wire it up:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// ViewController.m
|
||
</span>
|
||
@interface <span class="token class-name">ViewController</span> <span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
@property <span class="token punctuation">(</span>weak<span class="token punctuation">,</span> nonatomic<span class="token punctuation">)</span> IBOutlet ReactView <span class="token operator">*</span>reactView<span class="token punctuation">;</span>
|
||
@end</div><p>Here I disabled <strong>AutoLayout</strong> for simplicity. In real production world, you should turn on AutoLayout and setup constraints by yourself.</p><h2><a class="anchor" name="add-rctrootview-to-container-view"></a>Add RCTRootView To Container View <a class="hash-link" href="#add-rctrootview-to-container-view">#</a></h2><p>Ready for the most interesting part? Now we shall create the <code>RCTRootView</code>, where your React Native app lives in.</p><p>In <code>ReactView.m</code>, we need to first initiate <code>RCTRootView</code> with the URI of your <code>index.ios.bundle</code>. <code>index.ios.bundle</code> will be created by packager and served by React Native server, which will be discussed later on.</p><div class="prism language-javascript">NSURL <span class="token operator">*</span>jsCodeLocation <span class="token operator">=</span> <span class="token punctuation">[</span>NSURL URLWithString<span class="token punctuation">:</span>@<span class="token string">"http://localhost:8081/index.ios.bundle"</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token comment" spellcheck="true">
|
||
// For production use, this `NSURL` could instead point to a pre-bundled file on disk:
|
||
</span><span class="token comment" spellcheck="true">//
|
||
</span><span class="token comment" spellcheck="true">// NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
|
||
</span><span class="token comment" spellcheck="true">//
|
||
</span><span class="token comment" spellcheck="true">// To generate that file, run the curl command and add the output to your main Xcode build target:
|
||
</span><span class="token comment" spellcheck="true">//
|
||
</span><span class="token comment" spellcheck="true">// curl http://localhost:8081/index.ios.bundle -o main.jsbundle
|
||
</span>RCTRootView <span class="token operator">*</span>rootView <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">[</span>RCTRootView alloc<span class="token punctuation">]</span> initWithBundleURL<span class="token punctuation">:</span>jsCodeLocation
|
||
moduleName<span class="token punctuation">:</span> @<span class="token string">"SimpleApp"</span>
|
||
launchOptions<span class="token punctuation">:</span>nil<span class="token punctuation">]</span><span class="token punctuation">;</span></div><p>Then add it as a subview of the <code>ReactView</code>.</p><div class="prism language-javascript"><span class="token punctuation">[</span>self addSubview<span class="token punctuation">:</span>rootView<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
rootView<span class="token punctuation">.</span>frame <span class="token operator">=</span> self<span class="token punctuation">.</span>bounds<span class="token punctuation">;</span></div><h2><a class="anchor" name="start-development-server"></a>Start Development Server <a class="hash-link" href="#start-development-server">#</a></h2><p>In root directory, we need to start React Native development server.</p><div class="prism language-javascript"><span class="token punctuation">(</span>JS_DIR<span class="token operator">=</span>`pwd`<span class="token operator">/</span>ReactComponent<span class="token punctuation">;</span> cd Pods<span class="token operator">/</span>React<span class="token punctuation">;</span> npm run start <span class="token operator">--</span> <span class="token operator">--</span>root $JS_DIR<span class="token punctuation">)</span></div><p>This command will start up a React Native development server within our CocoaPods dependency to build our bundled script. The <code>--root</code> option indicates the root of your React Native apps – this will be our <code>ReactComponents</code> directory containing the single <code>index.ios.js</code> file. This running server will package up the <code>index.ios.bundle</code> file accessible via <code>http://localhost:8081/index.ios.bundle</code>.</p><h2><a class="anchor" name="compile-and-run"></a>Compile And Run <a class="hash-link" href="#compile-and-run">#</a></h2><p>Now compile and run your app. You shall now see your React Native app running inside of the <code>ReactView</code>.</p><p><img src="/react-native/img/EmbeddedAppExample.png" alt="Example"></p><p>Live reload works from the simulator, too! You’ve got a simple React component totally encapsulated behind an Objective-C <code>UIView</code> subclass.</p><h2><a class="anchor" name="conclusion"></a>Conclusion <a class="hash-link" href="#conclusion">#</a></h2><p>So under the hood, when <code>RCTRootView</code> is initialized, it will try to download, parse and run the bundle file from React Native development server. This means all you need to do is to implement your own container view or view controller for the <code>RCTRootView</code> – the <code>RCTRootView</code> ingests your bundled JS and renders your React components. Bravo!</p><p>You can checkout full source code of a sample application <a href="https://github.com/tjwudi/EmbededReactNativeExample" target="_blank">here</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="javascript-environment.html#content">Next →</a></div></div></section><footer class="wrap"><div class="right">© 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></body></html> |