mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
update website
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -180,7 +180,7 @@ for more information.</p><h3><a class="anchor" name="requestanimationframe"></a>
|
||||
familiar with. It accepts a function as its only argument and calls that
|
||||
function before the next repaint. It is an essential building block for
|
||||
animations that underlies all of the JavaScript-based animation APIs. In
|
||||
general, you shouldn't need to call this yourself - the animation API's will
|
||||
general, you shouldn't need to call this yourself - the animation APIs will
|
||||
manage frame updates for you.</p><h3><a class="anchor" name="react-tween-state-not-recommended-use-animated-animated-instead"></a>react-tween-state (Not recommended - use <a href="#animated" target="">Animated</a> instead) <a class="hash-link" href="#react-tween-state-not-recommended-use-animated-animated-instead">#</a></h3><p><a href="https://github.com/chenglou/react-tween-state" target="_blank">react-tween-state</a> is a
|
||||
minimal library that does exactly what its name suggests: it <em>tweens</em> a
|
||||
value in a component's state, starting at a <strong>from</strong> value and ending at
|
||||
|
||||
@@ -13,7 +13,7 @@ select <code>Build Phases</code> and drag the static library from the <code>Prod
|
||||
inside the Library you are importing to <code>Link Binary With Libraries</code></p><p><img src="/react-native/img/AddToBuildPhases.png" alt=""></p><h3><a class="anchor" name="step-3"></a>Step 3 <a class="hash-link" href="#step-3">#</a></h3><p>Not every library will need this step, what you need to consider is:</p><p><em>Do I need to know the contents of the library at compile time?</em></p><p>What that means is, are you using this library on the native side or only in
|
||||
JavaScript? If you are only using it in JavaScript, you are good to go!</p><p>This step is not necessary for libraries that we ship with React Native with the
|
||||
exception of <code>PushNotificationIOS</code> and <code>LinkingIOS</code>.</p><p>In the case of the <code>PushNotificationIOS</code> for example, you have to call a method
|
||||
on the library from your <code>AppDelegate</code> every time a new push notifiation is
|
||||
on the library from your <code>AppDelegate</code> every time a new push notification is
|
||||
received.</p><p>For that we need to know the library's headers. To achieve that you have to go
|
||||
to your project's file, select <code>Build Settings</code> and search for <code>Header Search
|
||||
Paths</code>. There you should include the path to your library (if it has relevant
|
||||
|
||||
@@ -10,7 +10,7 @@ public class <span class="token class-name">ReactImageManager</span> extends <sp
|
||||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="2-implement-method-createviewinstance"></a>2. Implement method <code>createViewInstance</code> <a class="hash-link" href="#2-implement-method-createviewinstance">#</a></h2><p>Views are created in the <code>createViewInstance</code> method, the view should initialize itself in its default state, any properties will be set via a follow up call to <code>updateView.</code></p><div class="prism language-javascript"> @Override
|
||||
public ReactImageView <span class="token function">createViewInstance<span class="token punctuation">(</span></span>ThemedReactContext context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">ReactImageView</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> Fresco<span class="token punctuation">.</span><span class="token function">newDraweeControllerBuilder<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> mCallerContext<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation"></a>3. Expose view property setters using <code>@ReactProp</code> (or <code>@ReactPropGroup</code>) annotation <a class="hash-link" href="#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation">#</a></h2><p>Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with <code>@ReactProp</code> (or <code>@ReactPropGroup</code>). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be declared as a <code>void</code> method and should be <code>public</code>. Property type sent to JS is determined automatically based on the type of value argumen of the setter. The following type of values are currently supported: <code>boolean</code>, <code>int</code>, <code>float</code>, <code>double</code>, <code>String</code>, <code>Boolean</code>, <code>Integer</code>, <code>ReadableArray</code>, <code>ReadableMap</code>. </p><p>Annotation <code>@ReactProp</code> has one obligatory argument <code>name</code> of type <code>String</code>. Name assigned to the <code>@ReactProp</code> annotation linked to the setter method is used to reference the property on JS side.</p><p>Except from <code>name</code>, <code>@ReactProp</code> annotation may take following optional arguments: <code>defaultBoolean</code>, <code>defaultInt</code>, <code>defaultFloat</code>. Those arguments should be of the corresponding primitive type (accordingly <code>boolean</code>, <code>int</code>, <code>float</code>) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, <code>null</code> will be provided as a default value in case when corresponding property gets removed.</p><p>Setter declaration requirements for methods annotated with <code>@ReactPropGroup</code> are different than for <code>@ReactProp</code>, please refer to the <code>@ReactPropGroup</code> annotation class docs for more information about it.</p><p><strong>IMPORTANT!</strong> in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that has been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" can value can be specified using <code>defaultBoolean</code>, <code>defaultFloat</code>, etc. arguments of <code>@ReactProp</code> annotation, for complex types setter will be called with value set to <code>null</code>).</p><div class="prism language-javascript"> @<span class="token function">ReactProp<span class="token punctuation">(</span></span>name <span class="token operator">=</span> <span class="token string">"src"</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation"></a>3. Expose view property setters using <code>@ReactProp</code> (or <code>@ReactPropGroup</code>) annotation <a class="hash-link" href="#3-expose-view-property-setters-using-reactprop-or-reactpropgroup-annotation">#</a></h2><p>Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with <code>@ReactProp</code> (or <code>@ReactPropGroup</code>). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be declared as a <code>void</code> method and should be <code>public</code>. Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported: <code>boolean</code>, <code>int</code>, <code>float</code>, <code>double</code>, <code>String</code>, <code>Boolean</code>, <code>Integer</code>, <code>ReadableArray</code>, <code>ReadableMap</code>. </p><p>Annotation <code>@ReactProp</code> has one obligatory argument <code>name</code> of type <code>String</code>. Name assigned to the <code>@ReactProp</code> annotation linked to the setter method is used to reference the property on JS side.</p><p>Except from <code>name</code>, <code>@ReactProp</code> annotation may take following optional arguments: <code>defaultBoolean</code>, <code>defaultInt</code>, <code>defaultFloat</code>. Those arguments should be of the corresponding primitive type (accordingly <code>boolean</code>, <code>int</code>, <code>float</code>) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that "default" values are only provided for primitive types, in case when setter is of some complex type, <code>null</code> will be provided as a default value in case when corresponding property gets removed.</p><p>Setter declaration requirements for methods annotated with <code>@ReactPropGroup</code> are different than for <code>@ReactProp</code>, please refer to the <code>@ReactPropGroup</code> annotation class docs for more information about it.</p><p><strong>IMPORTANT!</strong> in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that has been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case "default" value will be provided (for primitive types "default" can value can be specified using <code>defaultBoolean</code>, <code>defaultFloat</code>, etc. arguments of <code>@ReactProp</code> annotation, for complex types setter will be called with value set to <code>null</code>).</p><div class="prism language-javascript"> @<span class="token function">ReactProp<span class="token punctuation">(</span></span>name <span class="token operator">=</span> <span class="token string">"src"</span><span class="token punctuation">)</span>
|
||||
public void <span class="token function">setSrc<span class="token punctuation">(</span></span>ReactImageView view<span class="token punctuation">,</span> @Nullable String src<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
view<span class="token punctuation">.</span><span class="token function">setSource<span class="token punctuation">(</span></span>src<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
@@ -12,7 +12,7 @@ class, and <code>Navigator</code> re-implements that functionality entirely in
|
||||
JavaScript as a React component. A corollary of this is that <code>Navigator</code>
|
||||
will be compatible with Android and iOS, whereas <code>NavigatorIOS</code> will
|
||||
only work on the one platform. Below is an itemized list of differences
|
||||
between the two.</p><h2><a class="anchor" name="navigator"></a>Navigator <a class="hash-link" href="#navigator">#</a></h2><ul><li>Extensive API makes it completely customizable from JavaScript.</li><li>Under active development from the React Native team.</li><li>Written in JavaScript.</li><li>Works on iOS and Android.</li><li>Includes a simple navigation bar component similar to the default <code>NavigatorIOS</code> bar: <code>Navigator.NavigationBar</code>, and another with breadcrumbs called <code>Navigator.BreadcrumbNavigationBar</code>. See the UIExplorer demo to try them out and see how to use them.<ul><li>Currently animations are good and improving, but they are still less refined than Apple's, which you get from <code>NavigatorIOS</code>.</li></ul></li><li>You can provide your own navigation bar by passing it through the <code>navigationBar</code> prop.</li></ul><h2><a class="anchor" name="navigatorios"></a>NavigatorIOS <a class="hash-link" href="#navigatorios">#</a></h2><ul><li>Small, limited API makes it much less customizable than <code>Navigator</code> in its current form.</li><li>Development belongs to open-source community - not used by the React Native team on their apps.<ul><li>A result of this is that there is currently a backlog of unresolved bugs, nobody who uses this has stepped up to take ownership for it yet.</li></ul></li><li>Wraps UIKit, so it works exactly the same as it would on another native app. Lives in Objective-C and JavaScript.<ul><li>Consequently, you get the animations and behaviour that Apple has developed.</li></ul></li><li>iOS only.</li><li>Includes a navigation bar by default; this navigation bar is not a React Native view component and the style can only be slightly modified.</li></ul><p>For most non-trivial apps, you will want to use <code>Navigator</code> - it won't be long before you run into issues when trying to do anything complex with <code>NavigatorIOS</code>.</p></div><div class="docs-prevnext"><a class="docs-next" href="known-issues.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>
|
||||
between the two.</p><h2><a class="anchor" name="navigator"></a>Navigator <a class="hash-link" href="#navigator">#</a></h2><ul><li>Extensive API makes it completely customizable from JavaScript.</li><li>Under active development from the React Native team.</li><li>Written in JavaScript.</li><li>Works on iOS and Android.</li><li>Includes a simple navigation bar component similar to the default <code>NavigatorIOS</code> bar: <code>Navigator.NavigationBar</code>, and another with breadcrumbs called <code>Navigator.BreadcrumbNavigationBar</code>. See the UIExplorer demo to try them out and see how to use them.<ul><li>Currently animations are good and improving, but they are still less refined than Apple's, which you get from <code>NavigatorIOS</code>.</li></ul></li><li>You can provide your own navigation bar by passing it through the <code>navigationBar</code> prop.</li></ul><h2><a class="anchor" name="navigatorios"></a>NavigatorIOS <a class="hash-link" href="#navigatorios">#</a></h2><ul><li>Small, limited API makes it much less customizable than <code>Navigator</code> in its current form.</li><li>Development belongs to open-source community - not used by the React Native team on their apps.<ul><li>A result of this is that there is currently a backlog of unresolved bugs, nobody who uses this has stepped up to take ownership for it yet.</li></ul></li><li>Wraps UIKit, so it works exactly the same as it would on another native app. Lives in Objective-C and JavaScript.<ul><li>Consequently, you get the animations and behavior that Apple has developed.</li></ul></li><li>iOS only.</li><li>Includes a navigation bar by default; this navigation bar is not a React Native view component and the style can only be slightly modified.</li></ul><p>For most non-trivial apps, you will want to use <code>Navigator</code> - it won't be long before you run into issues when trying to do anything complex with <code>NavigatorIOS</code>.</p></div><div class="docs-prevnext"><a class="docs-next" href="known-issues.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)
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user