Android React-Nativeシリーズの-Native UI Components

このシリーズの前の記事は国慶節の時で、当初はNative UI Componentsで引っかかっていたので、続けられませんでした.昨日、android弟に聞いて、大丈夫だと言ったでしょう.やはり私自身がクズなので、今日も見続けます.ええと、ドキュメントがたくさん出ていることに気づきました.公式文書もあり、中国語版もあるとはいえ、勉強の道のりを記録する価値はあるのではないでしょうか.以下、公式ドキュメントの例を例に挙げます.元のdemoで私たちの修正を続けます.1.ewManagerサブクラスを作成し、getNameメソッドで返される文字列をjsで参照されるローカルビューとして書き換える.2.注釈ビュー属性、@UIpropで注釈、3.createViewInstanceメソッドを実行し、ビューを作成します.メソッド内で手動でsetterするupdateViewメソッドを実行します.くだらないことは言わないで、上のは簡単です.私たちが作ったクラスを見てみましょう.

/** * 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に登録し、createViewManagementにローカル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とproType esを定義しています.これらのプロパティはクラスで取得し、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資料を見てみました.後でjsよく勉強しなさい.