我们如何使Android片段显示在react-native中?

问题描述

我尝试构建本机ui组件，但常常会碰碰运气.该组件似乎不是以本机渲染的.

I've tried building native ui components and it is often a hit or miss. The component does not appear to be rendered in react-native.

但是，对于这个问题，我专门尝试在react-native内渲染一个Android片段，但是什么也没有出现.示例代码:

Though, for this question, I am specifically trying to render an Android fragment inside react-native but nothing is showing up. Example code:

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本身未得到渲染.

With the above view manager, the place where the view is supposed to be is not even colored white signifying that the FrameLayout itself does not get rendered.

我在做什么错了?

推荐答案

实际上，您的方向正确.之所以不渲染FrameLayout，是因为您没有在ReactNative中显式地添加样式来指定其高度和宽度.但是，即使这样，您的片段也不会被渲染.您可以执行一些更改来呈现片段.

Actually you are almost in the right direction. The reason your FrameLayout is not rendered is because you did not explicitly add a style in ReactNative to specific its height and width. However, even so, your fragment will not be rendered as well. There are a few changes that you can perform to render your fragment.

在ViewManager中，执行以下几项更改:

In your ViewManager, perform this few changes:

@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组件中

Then in your ReactNative Component

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

希望这可以帮助正在尝试在ReactNative视图内渲染片段的人

Hope this helps someone out there who is trying to render a fragment inside a ReactNative View

这篇关于我们如何使Android片段显示在react-native中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！