3

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

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

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

public class MyComponentManager extends SimpleViewManager<MyComponent> {

 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<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 MyComponentManager(mActivity)
    );
}
}

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

import React from 'react';

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

export default requireNativeComponent('MyComponent');

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

2 ответа 2

3
+100

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

public
class
MyComponent extends FrameLayout {

    public MyComponent(Context context)
    {
        super(context);
        Layoutinflater.from(context).inflate(R.layout.myComponent, this, true);
    }
    ...
}
7
  • Второй аргумент в методе inflate кидал ошибку. Я поставил null. Теперь вижу белый экран и маленькую красную точку в левом верхнем углу. 9 фев 2017 в 14:03
  • Layout самый простой: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@color/blue" tools:context="com.myapp.MyComponent"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="HELLO WORLD"/> </LinearLayout> 9 фев 2017 в 15:06
  • я ошибся, смените extends View на extends FrameLayout и верните второй аргумент, белый экран вы видите потому что ваш лайоут не приатачился к кастом вью, так как убрали второй аргумент
    – Vitaly
    10 фев 2017 в 4:00
  • то же самое. Белый экран и маленькая красная точка в левом верхнем углу. 10 фев 2017 в 6:29
  • может, потому что ccылки на xmlns:android и xmlns:tools в корневом лэйауте myComponent.xml подсвечены красным со словами "URI is not registered"? И тоже непонятно, что за дела >_< 10 фев 2017 в 7:02
1

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

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>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);

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.