2

我正在尝试使用反应原生桥在反应原生页面上呈现 Android 片段。一旦我尝试用 android 片段替换 react native 视图，它就会显示一个完整的空白视图。

我使用了布局检查器，发现片段视图（包含屏幕截图中提到的文本视图）在堆栈中但没有显示。附上相同的屏幕截图。 布局检查器屏幕截图

安卓代码：

protected FrameLayout createViewInstance( ThemedReactContext reactContext) {
      return new FrameLayout(reactContext);

    @Override
    public Map<String, Integer> getCommandsMap() {
        return MapBuilder.of(
                "create", 1
        );
    }

    @Override
    public void receiveCommand(FrameLayout root, int commandId, @Nullable ReadableArray args) {
        super.receiveCommand(root, commandId, args);
        int reactViewId = args.getInt(0);
        createFragment(root, reactViewId);
    }

public void createFragment(FrameLayout root, int reactViewId) {
        MyFragment fragment = MyFragment.newInstance(this.mCallerContext);
        mActivity = (FragmentActivity)mCallerContext.getCurrentActivity();
        mActivity.getSupportFragmentManager().beginTransaction()
                .replace(reactViewId, fragment, String.valueOf(R.id.my_view_id))
                .commitNow();
        mActivity.getSupportFragmentManager().executePendingTransactions();
    }

反应本机代码：

const MyComponent = requireNativeComponent("MyComponent");


componentDidMount() {
        setTimeout(()=>{
            this.create();
        }, 2000);
    }

create = () => {
        const androidViewid = findNodeHandle(this.nativeComponentRef);
        UIManager.dispatchViewManagerCommand(
            androidViewid,
            UIManager.MyComponent.Commands.create,
            [androidViewid],
        );
    };

render() {
        return (
            <View style={{ height: "100%", width: "100%", flex: 1 }} >
                <Text> IN REACT NATIVE</Text>
             <MyComponent style={{ height: "90%", width: "90%", flex: 1 }} ref={(nativeRef)=>(this.nativeComponentRef = nativeRef)} />
             </View>
        );
    }

你能帮忙解释一下为什么没有显示android视图吗？

4

0 回答 0