添加片段插入到反应天然视图(Add fragment into react-native view)

2019-09-29 21:56发布

长话短说:我试图创建为AndroidPay的反应本地项目本机模块。 AndroidPay的集成是可能只使用的片段(其是在最后的“与AndroidPay买入”按钮)。 因此,算法很简单,导出一个占位符反应本地的,包装在一个组成部分,在某些时候只是用它的ID添加片段到该占位符。 所以,代码如下:

public class AndroidPayPlaceholderViewManager extends SimpleViewManager<FrameLayout>{
    public static final String REACT_CLASS = "AndroidPayButton";

    public AndroidPayPlaceholderViewManager(ReactApplicationContext context) {
        super();
    }

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

    @Override
    protected FrameLayout createViewInstance(ThemedReactContext reactContext) {
        return (FrameLayout) LayoutInflater.from(reactContext).inflate(R.layout.android_pay_frg_placeholder, null);
    }
}

android_pay_placeholder.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal">
    <FrameLayout
        android:id="@+id/android_pay_placeholder"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal">
    </FrameLayout>
</FrameLayout>

JS部件的包装材料

import {View, requireNativeComponent} from 'react-native';
import React, {Component} from 'react';
import {NativeModules, findNodeHandle} from 'react-native';
import {isAndroid} from '../utils';


let iface = {
    propTypes: {
        ...View.propTypes, // include the default view properties
        foo: String
    }
};

let AndroidPayButtonNative = requireNativeComponent('NewStoreAndroidPayButton', iface);
console.log('AndroidPayButtonNative: ', AndroidPayButtonNative);
let AndroidPayModule = isAndroid() ? NativeModules.NewStoreAndroidPay : null;

class AndroidPayButton extends Component {
    state = {
        loaded: false
    };

    componentDidMount() {
        AndroidPayModule.loadFragment();
    }

    render() {
        return (
            <AndroidPayButtonNative {...this.props} />
        );
    }
}

export {AndroidPayButton};

机器人本机模块,其是负责加载片段的

public class AndroidPayModule extends ReactContextBaseJavaModule implements ActivityEventListener, LifecycleEventListener {
....
@ReactMethod
    public void loadFragment(int placeholderId) {
        ...
        WalletFragment mWalletFragment = WalletFragment.newInstance(...);


        // add Wallet fragment to the UI
        getCurrentActivity().getFragmentManager().beginTransaction()
                .add(R.id.android_pay_placeholder, mWalletFragment)
                .commit();

        // [END params_builder]
    }
....
}

所以,当我添加了“占位符”查看屏幕,我可以看到它,甚至与LayoutInspector检查,该ID是正确的:

而结果是,我总是得到是例外:

java.lang.IllegalArgumentException: No view found for id 0x7f0d00a6 (com.qwerty.playground:id/android_pay_placeholder) for fragment WalletFragment{388fd9c #0 id=0x7f0d00a6}
    at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:965)
    at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1148)
    at android.app.BackStackRecord.run(BackStackRecord.java:793)
    at android.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1535)        
    at android.app.FragmentManagerImpl$1.run(FragmentManager.java:482)
    at android.os.Handler.handleCallback(Handler.java:739)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:148)
    at android.app.ActivityThread.main(ActivityThread.java:5417)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

所以,球员,任何想法,为什么FragmentManager不能只找到这肯定存在一个观点,也许你们有人做这一招用的片段和应对本地和成功? 任何帮助,将不胜感激! 谢谢!

文章来源: Add fragment into react-native view