我们如何让 Android 片段显示在 react-native 中？

Question

我尝试过构建原生 ui 组件，但它经常是成功的或失败的。该组件似乎没有在 react-native 中呈现。

虽然，对于这个问题，我特意尝试在 react-native 中渲染一个 Android 片段，但没有显示任何内容。示例代码：

public class PreferenceViewManager extends SimpleViewManager<FrameLayout> {
    public static final String REACT_CLASS = "RCTPreferenceView";

    private WeakReference<Activity> activityWeakReference;

    public PreferenceViewManager(WeakReference<Activity> activityWeakReference) {
        this.activityWeakReference = activityWeakReference;
    }

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

    @Override
    public FrameLayout createViewInstance(ThemedReactContext context) {
        Log.d(REACT_CLASS, "PreferenceView createViewInstance");
        final FrameLayout view = new FrameLayout(context);
        view.setId(View.generateViewId());
        // Testing if the view does get rendered, it should show white even if fragment is not rendered!
        view.setBackgroundColor(Color.WHITE);
        // not sure where to call fragment beginTransaction properly, the code below is just for testing
        view.postDelayed(new Runnable() {
            @Override
            public void run() {
                onAfterUpdateTransaction(view);
            }
        }, 2000);
        return view;
    }

    @Override
    public void onAfterUpdateTransaction(FrameLayout view) {
        super.onAfterUpdateTransaction(view);

        activityWeakReference.get().getFragmentManager().beginTransaction().replace(view.getId(), new PreferenceView()).commit();
        Log.d(REACT_CLASS, "PreferenceView Commit"); // for debug
    }
}

使用上面的视图管理器，视图应该在的地方甚至都不是白色，表示 FrameLayout 本身没有被渲染。

我做错了什么？

Answer 1

实际上你几乎是在正确的方向。未渲​​染 FrameLayout 的原因是您没有在 ReactNative 中显式添加样式以指定其高度和宽度。但是，即便如此，您的片段也不会被渲染。您可以执行一些更改来呈现片段。

在您的 ViewManager 中，执行以下几个更改：

@Override
public FrameLayout createViewInstance(ThemedReactContext context) {
    final FrameLayout view = new FrameLayout(context);
    MyFragment fragment = MyFragment.newInstance();
    // Add the fragment into the FrameLayout
    reactContext.getCurrentActivity().getFragmentManager()
            .beginTransaction()
            .add(fragment, "My_TAG")
            .commit();
    // Execute the commit immediately or can use commitNow() instead
    reactContext.getCurrentActivity().getFragmentManager().executePendingTransactions();
    // This step is needed to in order for ReactNative to render your view
    addView(fragment.getView(), LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
    return view;
}

然后在你的 ReactNative 组件中

class ExampleComponent extends React.Component {
  render() {
    return (
      <View>
        <Text>Hello</Text>
        <RCTPreferenceView
          {...this.props}
          style={{ height: "80%", width: "100%" }}
        />
      </View>
    );
  }
}

希望这可以帮助那些试图在 ReactNative 视图中渲染片段的人

Answer 2

你必须先expose the Fragment in a view manager 然后bridge the view manager to the react native javascript code.