Reagieren,-Muttersprachler innerhalb eines Fragments

Habe ich es geschafft, um dies herauszufinden, mit viel Versuch und Irrtum. Ich habe gesehen, diese Frage rund um das internet und dachte, dies war der beste Ort zum posten der Antwort. Hier ist, wie zu tun, mit der neuesten version von Reagieren (0.29 schreiben):

Das erste, was wir tun werden ist, erstellen Sie eine abstrakte ReactFragment Klasse, dass wir während unserer app:

public abstract class ReactFragment extends Fragment {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    //This method returns the name of our top-level component to show
    public abstract String getMainComponentName();

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        mReactRootView = new ReactRootView(context);
        mReactInstanceManager =
                ((MyApplication) getActivity().getApplication())
                        .getReactNativeHost()
                        .getReactInstanceManager();

    }

    @Override
    public ReactRootView onCreateView(LayoutInflater inflater, ViewGroup group, Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        return mReactRootView;
    }


    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        mReactRootView.startReactApplication(
                mReactInstanceManager,
                getMainComponentName(),
                null
        );
    }
}

Werden wir jetzt in der Lage sein zu erstellen, die Fragmente, die render Reagieren Nativen Komponenten, z.B.:

public class HelloFragment extends ReactFragment {
    @Override
    public String getMainComponentName() { 
        return "hellocomponent"; //name of our React Native component we've registered 
    }
}

Ein wenig mehr Arbeit erforderlich ist, obwohl. Unsere Eltern Activity muss, passieren einige Dinge in der ReactInstanceManager damit Reagieren die Einheimischen lifecycle, um richtig zu arbeiten. Hier ist, was ich endete mit:

public class FragmentActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
    /*
    * Get the ReactInstanceManager, AKA the bridge between JS and Android
    * We use a singleton here so we can reuse the instance throughout our app
    * instead of constantly re-instantiating and re-downloading the bundle
    */
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fragment);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        /**
         * Get the reference to the ReactInstanceManager
         */
         mReactInstanceManager =
             ((MyApplication) getApplication()).getReactNativeHost().getReactInstanceManager();


        /*
        * We can instantiate a fragment to show for Activity programmatically,
        * or using the layout XML files.
        * This doesn't necessarily have to be a ReactFragment, any Fragment type will do.
        */

        Fragment viewFragment = new HelloFragment();
        getFragmentManager().beginTransaction().add(R.id.container, viewFragment).commit();
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    /*
     * Any activity that uses the ReactFragment or ReactActivty
     * Needs to call onHostPause() on the ReactInstanceManager
     */
    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause();
        }
    }

    /*
     * Same as onPause - need to call onHostResume
     * on our ReactInstanceManager
     */
    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        } 
        return super.onKeyUp(keyCode, event);
    }
}

Schließlich, Sie werden bemerken, dass der Verweis auf (MyApplication) ganzen code; dies ist eine Globale Application Objekt enthalten unsere ReactInstanceManager, auch bekannt als die Brücke zwischen Android und Reagieren Nativen. Dies ist das Muster, das React Native-Projekte verwenden, die intern, also habe ich einfach kopiert. Hier ist, wie es umgesetzt:

public class MyApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return true;
        }

        @Override
        public List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

Schwierigste bit war, herauszufinden, den Lebenszyklus zwischen dem Fragment und der Tätigkeit; die ReactRootView benötigt einen Verweis auf die Aktivität Kontext, in Reihenfolge zum instanziieren, so dass Sie sicher, dass getActivity() würde nicht null sein war wichtig. Auch die Registrierung der onHostPause() und onHostResume() in der übergeordneten Aktivität wurde unintuitiv auf den ersten, aber letztlich erwies sich als einfacher, wenn die ReactNativeInstanceManager wurde abstrahiert in eine Globale, anstatt halten Sie auf die Aktivität oder Fragment.

Hoffe, dies hilft jemand da draußen!