Android React-Native 学习 重用Native组件

这里是官网的学习地址 http://facebook.github.io/react-native/docs/getting-started.html

这个是 翻译版的 http://wiki.jikexueyuan.com/project/react-native/

 

参考这个：http://facebook.github.io/react-native/docs/native-components-android.html#content

大致意思如下：

 　　若想重用 本地的Android ui 组件类 A：

  　　1.需创建类AManager 继承自ViewManager 或者 SimpleManager

　　  2.在js中需要使用的熟悉 需要在Manager中添加@ReactProp 标记

        3.在Android 启动类 中  注册包

例子：

第一步：

  类A

package com.plugin;

import android.content.Context;
import android.widget.TextView;

public class ColorSizeText extends TextView {
    public ColorSizeText(Context context) {
        super(context);
    }
}

AManager

package com.plugin;

import android.view.View;

import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
public class ColorSizeTextManager extends SimpleViewManager {
    final String TESTName="TestText";
    @Override
    public String getName() {
        return TESTName;
    }

    @Override
    protected View createViewInstance(ThemedReactContext reactContext) {
        return new ColorSizeText(reactContext);
    }
}

 

第二步 

自定义 属性 或方法

AManager

package com.plugin;

import android.view.View;

import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;


public class ColorSizeTextManager extends SimpleViewManager {
    final String TESTName="TestText";
    @Override
    public String getName() {
        return TESTName;
    }

    @Override
    protected View createViewInstance(ThemedReactContext reactContext) {
        return new ColorSizeText(reactContext);
    }

    @ReactProp(name="FontColor")
    public void setFontColor(ColorSizeText v,int color){
        v.setTextColor(color);
    }

    @ReactProp(name="FontSize")
    public void setFontSize(ColorSizeText v,float size){
        v.setTextScaleX(size);
    }
}

3.注册包

现需要 创建一个 本地package

package com.plugin;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;

public class CustomPackages implements ReactPackage{
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList(
                new ColorSizeTextManager()
        );
    }
}

然后再MainActivity 中加上去

   /**
   * A list of packages used by the app. If the app uses additional views
   * or modules besides the default ones, add more packages here.
   */
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
              new MainReactPackage(),new CustomPackages()
      );
    }

 

4.js 中 创建类A

import React,{ requireNativeComponent, PropTypes } from 'react-native';

var View = React.View;


var iface = {
  name: 'ColorSizeText',
  propTypes: {
      ...View.propTypes,/*注意 这里是防止一些属性没有被继承*/
    FontColor: PropTypes.number,
    FontSize: PropTypes.number
  },
};

module.exports = requireNativeComponent('TestText', iface);

 

5.使用

import CCText from './android_plugin/ColorSizeText';
//import MainView from './main';

var color=0xf0f0f0;
var size=40; 

。。。。
<CCText  FontColor={color}></CCText>

 

转载于:https://www.cnblogs.com/wolfsky6/p/5285876.html