我曾尝试构建 native UI 组件,但往往是成功或失败。该组件似乎没有在 react-native 中呈现。
不过,对于这个问题,我专门尝试在 react-native 中渲染一个 Android fragment ,但没有任何显示。示例代码:
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
}
}
使用上面的 View 管理器, View 应该在的地方甚至没有被涂成白色,这表明 FrameLayout 本身没有被渲染。
我做错了什么?
最佳答案
实际上,您的方向几乎是正确的。您的 FrameLayout 未呈现的原因是因为您没有在 ReactNative 中明确添加样式以指定其高度和宽度。但是,即便如此,您的 fragment 也不会被渲染。您可以执行一些更改来呈现您的 fragment 。
在您的 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 View 中渲染 fragment 的人
关于android - 我们如何让 Android fragment 显示在 react-native 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34410559/