RN自定义原生控件(一)

1 . android端原生控件管理器创建
public class CrazyButtonManager extends SimpleViewManager<Button> {
public static final String REACT_CLASS = "CrazyButton"; //抛给js层认的标签名
@Override
public String getName() {
return REACT_CLASS;
}

@ReactProp(name = "title") //定义给js层赋值的prop属性
public void setTitle(Button btn,String text) {
    btn.setText(text);
}

//创建button的实例
@Override
protected Button createViewInstance(ThemedReactContext reactContext) {
Button btn = new Button(reactContext);
btn.setText("hello i'm a button!!!");
return btn;
}

//创建视图管理器
public List<ViewManager> createViewManagers(
ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(
new CrazyButtonManager()
);
}
}

2. 引入到package
   public class MyFeaturePackage implements ReactPackage {
   @Override
   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
   List<ViewManager> views = new ArrayList<>();
   views.add(new CrazyButtonManager());
   return views;
   }
   }

3. package注册
   public class MainApplication extends Application implements ReactApplication {
   @Override
   protected List<ReactPackage> getPackages() {
   return Arrays.<ReactPackage>asList(
   new MyFeaturePackage(),//将package注册到此位置
   new MainReactPackage(),
   new RNGestureHandlerPackage()
   );
   }

4. js层组件注册
   // CrazyButton.js
   //为了方便引用，安置在单独文件中使用
   import PropTypes from 'prop-types'
   import { requireNativeComponent, View } from 'react-native';

var iface = {
name: 'CrazyButton',
propTypes: {
title: PropTypes.string,
...View.propTypes
}
}
module.exports = requireNativeComponent('CrazyButton',iface);

5. js层组件调用
   import CrazyButton from './components/CrazyButton'
   <CrazyButton title="abc" style={{
   backgroundColor: '#eeeeee',
   width: 100,
   height: 100
   }}>
   </CrazyButton>