将片段添加到react-native视图中

时间:2017-04-25 14:25:45

标签: android android-fragments react-native fragmentmanager

长话短说:我正在尝试为AndroidPay的反应本机项目创建本机模块。 AndroidPay的集成只能使用片段(最终的“使用AndroidPay购买”按钮)。因此算法非常简单,在react-native中导出占位符,将其包装在组件中,并且在某些时候只需使用它的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};

负责加载片段的android原生模块

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是正确的:

enter image description here

我总是得到的结果是例外:

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不能只找到一个肯定存在的视图,也许你们中的某个人用片段做了这个技巧并且反应原生并成功了?任何帮助,将不胜感激!谢谢!

0 个答案:

没有答案