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>