react native自定义 组件[1]

原生UI组件
React-Native之Android:封装原生UI组件

与自定义module差不多，module继承‘ReactContextBaseJavaModule’
view继承 SimpleViewManager
rn版本0.38
使用android textView

1、实现SimpleViewManager ViewManager的子类

package react.view;

import android.graphics.Color;
import android.widget.TextView;

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

/**
 * Created by Administrator on 2016/12/7.
 */

public class MyViewManager extends SimpleViewManager<TextView> {
    @Override
    public String getName() {
        return "MyTextView";
    }

    @Override
    protected TextView createViewInstance(ThemedReactContext reactContext) {
        return new TextView(reactContext.getBaseContext());
    }

    private void log(String str) {
//        Log.d("MyViewManager", str);
    }

    @ReactProp(name = "text")
    public void setText(TextView view, String text) {
        log("setText ->" + view.toString() + " " + text);
        view.setText(text);
    }

    @ReactProp(name = ViewProps.BACKGROUND_COLOR, defaultInt = 0x000000)
    public void setBackgroudColor(TextView view, int color) {
        view.setBackgroundColor(color);
    }

    @ReactProp(name = ViewProps.FONT_SIZE, defaultFloat = 18)
    public void setTextSize(TextView view, float fontSize) {
        log("setTextSize ->" + view.toString() + " " + fontSize);
        view.setTextSize(fontSize);
    }

    @ReactProp(name = ViewProps.COLOR, defaultInt = Color.BLACK)
    public void setTextColor(TextView view, int textColor) {
        log("setTextColor ->" + view.toString() + " " + textColor);
        view.setTextColor(textColor);
    }

    @ReactProp(name = "isAlpha", defaultBoolean = false)
    public void setTextAlpha(TextView view, boolean isAlpha) {
        log("setTextAlpha ->" + view.toString() + " " + isAlpha);
        if (isAlpha) {
            view.setAlpha(0.5f);
        } else {
        }
    }
}

2、ViewManager 添加到ReactPackage

package react.view;

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.ArrayList;
import java.util.Collections;
import java.util.List;

/**
 * Created by Administrator on 2016/12/7.
 */

public class MyViewReactPackage 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) {
        List<ViewManager> list = new ArrayList<>();
        list.add(new MyViewManager());
        return list;
    }
}

3、ReactPackage 添加到Application

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new VectorIconsPackage(),
              new PickerPackage(),
              new MyModuleReactPackage(),
              new MyViewReactPackage()
      );
    }
  };

4、js 定义组件

myTextView .js

/**
 * Created by Administrator on 2016/12/7.
 */
import { PropTypes } from 'react';
import { requireNativeComponent } from 'react-native';

var myTextView = {
    name: 'MyTextView',
    propTypes: {
        text: PropTypes.string,
        fontSize: PropTypes.number,
        color: PropTypes.number,
        isAlpha: PropTypes.bool,
        backgroundColor:PropTypes.number,

        testID:PropTypes.string,
        accessibilityComponentType:PropTypes.string,
        accessibilityLabel:PropTypes.string,
        accessibilityLiveRegion:PropTypes.string,
        renderToHardwareTextureAndroid:PropTypes.bool,
        importantForAccessibility:PropTypes.string,
        onLayout:PropTypes.bool,
    }
}
module.exports = requireNativeComponent('MyTextView', myTextView);

其中的propTypes text 为java中MyViewManager定义的@ReactProp注解 name值

支持的类型_官方文档了

5、使用 就可以和正常的组件一样使用

/**
 * Created by Administrator on 2016/12/7.
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    requireNativeComponent,
    PropTypes,
    Dimensions,
    Alert,
    Text,
    View
} from 'react-native'
import MyTextView from './componet/MyTextView.js'
const dimensions = Dimensions.get('window');
class NativeViewDemo extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    _onPress = ()=> {
        Alert.alert("onPress")
    }
    // 渲染
    render() {
        /*
         在styles中使用与在属性中使用效果是一样的，属性中使用会覆盖样式中的使用
         */
        return (
            <View style={{flex:1}}>
                <MyTextView
                onPress={this._onPress}
                style={styles.textDefault}
                isAlpha={false}
                fontSize={50}
                backgroundColor={0x4eff0000}
                text="你好"
                />
            </View>
        );
    }

}
const styles = StyleSheet.create({
    textDefault: {
        width: dimensions.width,
        paddingLeft: 20,
        fontSize: 10,
        height: 100,
    },
});
export default NativeViewDemo;

6、事件处理 相互绑定

java 发送事件

  public class MyViewManager extends SimpleViewManager<TextView> {
    @Override
    public String getName() {
        return "MyTextView";
    }

    @Override
    protected TextView createViewInstance(final ThemedReactContext reactContext) {
        final TextView textView = new TextView(reactContext.getBaseContext());
        textView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                log("onTouch() called with: " + "v = [" + v + "], event = [" + event + "]");
                if (event.getAction() == MotionEvent.ACTION_DOWN) {
                    WritableMap nativeEvent = Arguments.createMap();
                    nativeEvent.putString("message", "ACTION_DOWN");
                    reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
                            textView.getId(), "topChange", nativeEvent
                    );
                } 
                return true;
            }
        });
        return textView;
    }
```
关键代码
```
reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
                            textView.getId(), "topChange", nativeEvent
                    );```
  和自定义module第三种发送事件类似,
**eventName topChange随便写的话，在js中是收不到**
查看UIManagerModuleConstants.java 映射关系 *不明白*

js中接收

```
/**
 * Created by Administrator on 2016/12/7.
 */
import React,{
    Component,PropTypes }
    from 'react';

import {
    requireNativeComponent
    ,Alert
} from 'react-native';

var myTextView = {
    name: 'MyTextView', //MyViewManager getName的返回值
    propTypes: {
        text: PropTypes.string,
        fontSize: PropTypes.number,
        color: PropTypes.number,
        isAlpha: PropTypes.bool,
        backgroundColor: PropTypes.number,

        testID: PropTypes.string,
        accessibilityComponentType: PropTypes.string,
        accessibilityLabel: PropTypes.string,
        accessibilityLiveRegion: PropTypes.string,
        renderToHardwareTextureAndroid: PropTypes.bool,
        importantForAccessibility: PropTypes.string,
        onLayout: PropTypes.bool,
    }
}
//module.exports = requireNativeComponent('MyTextView', myTextView);

var RCTMyView = requireNativeComponent('MyTextView', myTextView, {
    /*能不希望原生专用的属性出现在API之中，也就不希望把它放到propTypes里。
     可是如果你不放的话，又会出现一个报错。解决方案就是带上nativeOnly选项*/
    nativeOnly: {
        onChange: true,
    }
});
class MyView extends Component {
    constructor() {
        super();
    }

    _onChange = (event:Event)=> {
        console.log("_onChange", event);
        if (!this.props.onMyPress) {
            return;
        }
        if (event.nativeEvent.message === 'ACTION_DOWN') {
            this.props.onMyPress();
            return;
        }
    }


    render() {
        /*java发送的是topChange在此接收的是onChange因为在UIManagerModuleConstants.java中定义了映射关系*/
        return <RCTMyView
            {...this.props}
            onChange={this._onChange}/>
    }
}
MyView.propTypes = {
    /*propTypes和上面的意思应该差不多*/
    onMyPress: React.PropTypes.func,
}
module.exports = MyView;

```

### 事件 发送自定义事件
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,530评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 86,403评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,120评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,770评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,758评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,649评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,021评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,675评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,931评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,410评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,004评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2赞 343

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,432评论 25赞 707
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4赞 62
  • awesome-android
    afinalAfinal是一个android的ioc，orm框架 https://github.com/yangf...
    passiontim阅读 15,396评论 2赞 45
  • 路上的悼念
    我们从青岛出发，一路拉着货物直奔惠州的目的地。 车是刚买的，司机也是现雇的，一切都不熟悉。 新买的导航也是个很困惑...
    一缕阳光yg阅读 439评论 3赞 1
  • 黄鹤楼送孟浩然之广陵
    koson_lau阅读 337评论 0赞 0