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:
Travis CI
@@ -11,40 +11,25 @@ public class <span class="token class-name">ReactImageManager</span> extends <sp
|
||||
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>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><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> String src<span class="token punctuation">)</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>
|
||||
|
||||
@<span class="token function">ReactProp<span class="token punctuation">(</span></span>name <span class="token operator">=</span> <span class="token string">"borderRadius"</span><span class="token punctuation">)</span>
|
||||
@<span class="token function">ReactProp<span class="token punctuation">(</span></span>name <span class="token operator">=</span> <span class="token string">"borderRadius"</span><span class="token punctuation">,</span> defaultFLoat <span class="token operator">=</span> 0f<span class="token punctuation">)</span>
|
||||
public void <span class="token function">setBorderRadius<span class="token punctuation">(</span></span>ReactImageView view<span class="token punctuation">,</span> float borderRadius<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
view<span class="token punctuation">.</span><span class="token function">setBorderRadius<span class="token punctuation">(</span></span>borderRadius<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
|
||||
@<span class="token function">ReactProp<span class="token punctuation">(</span></span>name <span class="token operator">=</span> ViewProps<span class="token punctuation">.</span>RESIZE_MODE<span class="token punctuation">)</span>
|
||||
public void <span class="token function">setResizeMode<span class="token punctuation">(</span></span>ReactImageView view<span class="token punctuation">,</span> String resizeMode<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="4-implement-method-updateview"></a>4. Implement method <code>updateView</code> <a class="hash-link" href="#4-implement-method-updateview">#</a></h2><p>Setting properties on a view is not handled by automatically calling setter methods as it is on iOS; for Android, you manually invoke the setters via the <code>updateView</code> of your <code>ViewManager</code>. Values are fetched from the <code>CatalystStylesDiffMap</code> and dispatched to the <code>View</code> instance as required. It is up to a combination of <code>updateView</code> and the <code>View</code> class to check the validity of the properties and behave accordingly.</p><div class="prism language-javascript"> @Override
|
||||
public void <span class="token function">updateView<span class="token punctuation">(</span></span>final ReactImageView view<span class="token punctuation">,</span>
|
||||
final CatalystStylesDiffMap props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
super<span class="token punctuation">.</span><span class="token function">updateView<span class="token punctuation">(</span></span>view<span class="token punctuation">,</span> props<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span><span class="token function">hasKey<span class="token punctuation">(</span></span>PROP_RESIZE_MODE<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
view<span class="token punctuation">.</span><span class="token function">setScaleType<span class="token punctuation">(</span></span>
|
||||
ImageResizeMode<span class="token punctuation">.</span><span class="token function">toScaleType<span class="token punctuation">(</span></span>props<span class="token punctuation">.</span><span class="token function">getString<span class="token punctuation">(</span></span>PROP_RESIZE_MODE<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span><span class="token function">hasKey<span class="token punctuation">(</span></span>PROP_SRC<span class="token punctuation">)</span><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>props<span class="token punctuation">.</span><span class="token function">getString<span class="token punctuation">(</span></span>PROP_SRC<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span><span class="token function">hasKey<span class="token punctuation">(</span></span>PROP_BORDER_RADIUS<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
view<span class="token punctuation">.</span><span class="token function">setBorderRadius<span class="token punctuation">(</span></span>props<span class="token punctuation">.</span><span class="token function">getFloat<span class="token punctuation">(</span></span>PROP_BORDER_RADIUS<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">.</span>0f<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
view<span class="token punctuation">.</span><span class="token function">maybeUpdateView<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="5-register-the-viewmanager"></a>5. Register the <code>ViewManager</code> <a class="hash-link" href="#5-register-the-viewmanager">#</a></h2><p>The final Java step is to register the ViewManager to the application, this happens in a similar way to <a href="NativeModulesAndroid.md" target="_blank">Native Modules</a>, via the applications package member function <code>createViewManagers.</code></p><div class="prism language-javascript"> @Override
|
||||
public void <span class="token function">setResizeMode<span class="token punctuation">(</span></span>ReactImageView view<span class="token punctuation">,</span> @Nullable String resizeMode<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
view<span class="token punctuation">.</span><span class="token function">setScaleType<span class="token punctuation">(</span></span>ImageResizeMode<span class="token punctuation">.</span><span class="token function">toScaleType<span class="token punctuation">(</span></span>resizeMode<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="4-register-the-viewmanager"></a>4. Register the <code>ViewManager</code> <a class="hash-link" href="#4-register-the-viewmanager">#</a></h2><p>The final Java step is to register the ViewManager to the application, this happens in a similar way to <a href="NativeModulesAndroid.md" target="_blank">Native Modules</a>, via the applications package member function <code>createViewManagers.</code></p><div class="prism language-javascript"> @Override
|
||||
public List<ViewManager<span class="token operator">></span> <span class="token function">createViewManagers<span class="token punctuation">(</span></span>
|
||||
ReactApplicationContext reactContext<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> Arrays<span class="token punctuation">.</span><ViewManager<span class="token operator">></span><span class="token function">asList<span class="token punctuation">(</span></span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">ReactImageManager</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="6-implement-the-javascript-module"></a>6. Implement the JavaScript module <a class="hash-link" href="#6-implement-the-javascript-module">#</a></h2><p>The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. Much of the effort is handled by internal React code in Java and JavaScript and all that is left for you is to describe the <code>propTypes</code>.</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// ImageView.js
|
||||
<span class="token punctuation">}</span></div><h2><a class="anchor" name="5-implement-the-javascript-module"></a>5. Implement the JavaScript module <a class="hash-link" href="#5-implement-the-javascript-module">#</a></h2><p>The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. Much of the effort is handled by internal React code in Java and JavaScript and all that is left for you is to describe the <code>propTypes</code>.</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// ImageView.js
|
||||
</span>
|
||||
<span class="token keyword">var</span> <span class="token punctuation">{</span> requireNativeComponent <span class="token punctuation">}</span> <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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user