React Native: Android UI component

#java #android #activity #reactjs #react_native

Нужно подключить компонент:

public class MyComponent extends Activity {
...
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.myComponent);
    ...
}
...
}


Для него создаю класс Manager:

public class MyComponentManager extends SimpleViewManager {

 public static final String REACT_CLASS = "MyComponent";

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    private ThemedReactContext mContext = null;
    private Activity mActivity = null;

    @Override
    protected MyComponent createViewInstance(ThemedReactContext context) {
        mContext = context;
        return new MyComponent(mContext);
    }

    public MyComponentManager(Activity activity) {
        mActivity = activity;
    }
}


,класс Package:

public class MyComponentPackage implements ReactPackage {

private Activity mActivity = null;

public MyComponentPackage(Activity activity) {
    mActivity = activity;
}

@Override
public List
createNativeModules(ReactApplicationContext reactContext) {
    return Collections.emptyList();
}

@Override
public List> createJSModules() {
    return Collections.emptyList();
}

@Override
public List
createViewManagers(ReactApplicationContext reactContext) {
    return Arrays.asList(
            new MyComponentManager(mActivity)
    );
}
}


и достаю его в файле myComponent.js:

import React from 'react';

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

export default requireNativeComponent('MyComponent');


Только в MyComponentManager в SimpleViewManager должен подаваться class extends View,
а у меня - Activity. Как мне подключить мой компонент? 
    

Ответы

Ответ 1

А есть необходимость ваш компонент наследовать от активити? Если нет необходимости
- делайте кастом вью:

public
class
MyComponent extends FrameLayout {

    public MyComponent(Context context)
    {
        super(context);
        Layoutinflater.from(context).inflate(R.layout.myComponent, this, true);
    }
    ...
}


Ответ 2

В общем, класс Package всего-то нужно зарегистрировать в файле MainApplication.java:

@Override
protected List getPackages() {
  return Arrays.asList(
      new MainReactPackage(),
      new MyComponentPackage() 
  );
}


До этого, конечно, можно и самому додуматься, но тот факт, что официальном мануале
ни единого упоминания про это, вводит в заблуждение. Также в myComponent.js нужно указать
дефолтные проптайпы:

import React, {
    PropTypes
} from 'react';

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

let iface = {
    name: 'MyComponent',
    propTypes: {
        ...View.propTypes
    }
};

export default requireNativeComponent('MyComponent', iface);


Наследовать от вью мою активити не нужно, а просто из вью класса её запустить:

Intent newIntent = new Intent(context, MyComponent.class);
newIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
context.startActivity(newIntent);