Docs for @ReactProp

This commit is contained in:
Krzysztof Magiera 2015-10-28 20:35:09 +00:00
parent 15006cf0b4
commit 5b426c2a18
1 changed files with 30 additions and 19 deletions

View File

@ -22,11 +22,10 @@ These subclasses are essentially singletons - only one instance of each is creat
Vending a view is simple:
1. Create the ViewManager subclass.
2. Annotate the view properties with `@UIProp`
3. Implement the `createViewInstance` method
4. Implement the `updateView` method
5. Register the manager in `createViewManagers` of the applications package.
6. Implement the JavaScript module
2. Implement the `createViewInstance` method
3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
4. Register the manager in `createViewManagers` of the applications package.
5. Implement the JavaScript module
## 1. Create the `ViewManager` subclass
@ -45,20 +44,7 @@ public class ReactImageManager extends SimpleViewManager<ReactImageView> {
}
```
## 2. Annotate the view properties
Properties that are to be reflected in JavaScript are annotated with `@UIProp`. The types currently supported are `BOOLEAN`, `NUMBER`, `STRING`, `MAP` and `ARRAY`. Each property is declared as a public static final String and its assigned value will be the name of the property in JavaScript.
```java
@UIProp(UIProp.Type.STRING)
public static final String PROP_SRC = "src";
@UIProp(UIProp.Type.NUMBER)
public static final String PROP_BORDER_RADIUS = "borderRadius";
@UIProp(UIProp.Type.STRING)
public static final String PROP_RESIZE_MODE = ViewProps.RESIZE_MODE;
```
## 3. Implement method `createViewInstance`
## 2. Implement method `createViewInstance`
Views are created in the `createViewInstance` method, the view should initialize itself in its default state, any properties will be set via a follow up call to `updateView.`
@ -69,6 +55,31 @@ Views are created in the `createViewInstance` method, the view should initialize
}
```
## 3. Expose view property setters using `@ReactProp` (or `@ReactPropGroup`) annotation
Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with `@ReactProp` (or `@ReactPropGroup`). 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 `void` method and should be `public`. 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: `boolean`, `int`, `float`, `double`, `String`, `ReadableArray`, `ReadableMap`.
Annotation `@ReactProp` has one obligatory argument `name` of type `String`. Name assigned to the `@ReactProp` annotation linked to the setter method is used to reference the property on JS side.
Except from `name`, `@ReactProp` annotation may take following optional arguments: `defaultBoolean`, `defaultInt`, `defaultFloat`. Those arguments should be of the corresponding primitive type (accordingly `boolean`, `int`, `float`) 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, `null` will be provided as a default value in case when corresponding property gets removed.
Setter declaration requirements for methods annotated with `@ReactPropGroup` are different than for `@ReactProp`, please refer to the `@ReactPropGroup` annotation class docs for more information about it.
```java
@ReactProp(name = "src")
public void setSrc(ReactImageView view, String src) {
}
@ReactProp(name = "borderRadius")
public void setBorderRadius(ReactImageView view, float borderRadius) {
}
@ReactProp(name = ViewProps.RESIZE_MODE)
public void setResizeMode(ReactImageView view, String resizeMode) {
}
```
## 4. Implement method `updateView`
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 `updateView` of your `ViewManager`. Values are fetched from the `CatalystStylesDiffMap` and dispatched to the `View` instance as required. It is up to a combination of `updateView` and the `View` class to check the validity of the properties and behave accordingly.