Android(安卓)React-Native系列之-Native UI Components

这个系列的上一篇文章是在国庆节的时候，当初因为在Native UI Components这里卡住了，所以没有继续坚持下去。昨天，问了下android弟说这么没问题，好吧。还是我自己渣，所以，今天继续来看下。额，发现文档还多出来不少东西。虽然说有官方文档，也有中文版，但是，还是值得记录一下学习路程的，不是么。
下面以官方文档例子为例。在原来的demo上继续做咱的修改。
1. 创建ViewManager子类，通过重写getName方法返回的字符串作为js中引用的本地视图。
2. 注释视图属性，@UIProp来注释，
3. 执行createViewInstance方法，创建视图，
4. 执行updateView方法，要在方法中手动setter。
废话不多说，上面的很简单，我们来看看我们创建的类把。

/** * Created by mac on 15-10-8. */public class ReactImageManager extends SimpleViewManager<ReactImageView>{    public static final String REACT_CLASS="RCTImageView";    @UIProp(UIProp.Type.STRING)    public static final String PROP_SRC="src";    @UIProp(UIProp.Type.STRING)    public static final String PROP_BORDER_RADIUS="borderRadius";    @UIProp(UIProp.Type.STRING)    public static final String PROP_RESIZE_MODE= ViewProps.RESIZE_MODE;    private Object mCallerContext=null;    @Override    public String getName() {        return REACT_CLASS;    }    @Override    protected ReactImageView createViewInstance(ThemedReactContext context) {        return new ReactImageView(context, Fresco.newDraweeControllerBuilder(),mCallerContext);    }    @Override    public void updateView(ReactImageView view, CatalystStylesDiffMap props) {        super.updateView(view, props);        if (props.hasKey(PROP_RESIZE_MODE)){            view.setScaleType(ImageResizeMode.toScaleType(props.getString(PROP_RESIZE_MODE)));        }        if (props.hasKey(PROP_SRC)){            view.setSource(props.getString(PROP_SRC));        }        if (props.hasKey(PROP_BORDER_RADIUS)){            view.setBorderRadius(props.getFloat(PROP_BORDER_RADIUS,0.0f));        }        view.maybeUpdateView();    }}

并不是很难理解。
5. 注册ViewManager
这一步和以前系列一样。MainReactPackage中注册，
在createViewManagers中添加上我们的本地UI组件。
6. 在与index.android.js同级目录中添加一个ImageView.js文件，内容如下

var { requireNativeComponent, PropTypes } = require('react-native');var iface = {  name: 'ImageView',  propTypes: {    src: PropTypes.string,    borderRadius: PropTypes.number,    resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch']),  },};module.exports = requireNativeComponent('RCTImageView', iface);

这段代码啥意思呢？意思就是说我们定义了本地组件，名字叫做RCTImageView(getName得到的)，组件对象是啥类，iface这个对象，这个对象中我们定义了name和proTypes，这些属性我们会在类中获取到，然后改变view的形状。就像下面这段代码一样。

if (props.hasKey(PROP_SRC)){            view.setSource(props.getString(PROP_SRC));        }

在index.android.js中引用我们的本地组件
首先，得将组件当做一个对象包进来。

var ImageView = require('./ImageView');

接着，直接用就ok了。如下

<ImageView  src={'http://i.imgur.com/UePbdph.jpg'} borderRadius={15} resizeMode={'cover'} // source={{uri:movie.posters.thumbnail}} style={styles.thumbnail} > </ImageView>

咱们来看下效果。

效果出来了，那么说下我上次为什么没有弄出来。原因就在我没将那个js文件包进来。
，就这么多吧，本来不想写这篇的。但是心中有个梗，不去不快。接下来我会照着官网上其他例子来一遍。然后在看看github react-native里面的资料，这个系列到此为止。等待1.0版本出炉。
在说一说我的计划，
这个星期将文档看了，将github资料看一看。以后将react.js好好学一学。

更多相关文章

随机推荐