封装原生TextView

/*<strong><span style="font-size:18px;">MainActivity</span></strong>*/package com.testui;import com.facebook.react.ReactActivity;import com.facebook.react.ReactPackage;import com.facebook.react.shell.MainReactPackage;import com.burnweb.rnwebview.RNWebViewPackage;import java.util.Arrays;import java.util.List;public class MainActivity extends ReactActivity {    /**     * Returns the name of the main component registered from JavaScript.     * This is used to schedule rendering of the component.     */    @Override    protected String getMainComponentName() {        return "TestUI";    }    /**     * Returns whether dev mode should be enabled.     * This enables e.g. the dev menu.     */    @Override    protected boolean getUseDeveloperSupport() {        return BuildConfig.DEBUG;    }   /**   * 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 AnExampleReactPackage(),              new RNWebViewPackage()      );    }}/*<strong><span style="font-size:18px;">AnExampleReactPackage</span></strong>*/package com.testui;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 wyq on 2016/1/21. */public class AnExampleReactPackage 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> viewManagers = new ArrayList<>();        viewManagers.add(new ReactImage());        viewManagers.add(new ReactTextViewManager());        return  viewManagers;    }}/*<strong><span style="font-size:18px;">ReactTextViewManager </span></strong>(封装的view)*/package com.testui;import android.util.Log;import android.widget.TextView;import com.facebook.react.uimanager.SimpleViewManager;import com.facebook.react.uimanager.ThemedReactContext;import com.facebook.react.uimanager.annotations.ReactProp;public class ReactTextViewManager extends SimpleViewManager<TextView> {    private static final String TAG="MyTextView" ;    @Override    public String getName() {        Log.i(TAG,"getName");        return "MyTextView";    }    @Override    protected TextView createViewInstance(ThemedReactContext reactContext) {        Log.i(TAG,"createViewInstance:");//        TextView textView = new TextView(reactContext);//        return textView;        return new TextView(reactContext);    }    @ReactProp( name = "text")    public void <strong>setText</strong>(final TextView view,String text) {//这里setText应该高亮        Log.i(TAG, "text:"+text);        view.setText(text);    }}/** *<strong><span style="font-size:18px;">TextView.js</span></strong> */'use strict';var React = require('react-native'); var {   View,   requireNativeComponent,   PropTypes } = React;class MyTextView extends React.Component {  constructor() {    super();    console.log("MyTextView constructor");  }  render() {    console.log("MyTextView render");    return (    <MySelfTextView {...this.props}>    </MySelfTextView>);  }}MyTextView.propTypes = {   ...View.propTypes,  text: PropTypes.string};var MySelfTextView = requireNativeComponent('MyTextView', MyTextView);module.exports = MyTextView;/** * <strong><span style="font-size:18px;">index.android.js</span></strong> */ 'use strict'; import React, {   AppRegistry,   Component,   StyleSheet,   Text,   View } from 'react-native'; var MyTextView = require('./TextView'); var TextViewAndroidExample = React.createClass({ render: function() {console.log("TextViewAndroidExample render");       return (<View>                    <Text                          style={styles.text}> hello wyq                         </Text>                     <MyTextView                          style={styles.containerTextView}                          text='hello gagag'>                         </MyTextView>                 </View>       );     } }); var styles = StyleSheet.create({     containerTextView: {        flex: 1,        width:150,        height:80,   },     text:{        color:'blue'      } }); AppRegistry.registerComponent('TestUI', () => TextViewAndroidExample);

运行结果：