Wie starte ich in einem Fragment reaktions-nativ? Wenn die onCreateView-Funktion reactive-native in Fragment platziert, kann sie View from mReactRootView nicht zurückgeben.
View view = inflater.inflate(mReactRootView. , container, false);
Ich habe es mit viel Versuch und Irrtum herausgefunden. Ich habe diese Frage im Internet gesehen und dachte, dass dies der beste Ort ist, um die Antwort zu posten. Hier ist, wie mit der neuesten Version von React (0.29 zum Zeitpunkt des Schreibens):
Als Erstes erstellen wir eine abstrakte Klasse ReactFragment , die wir in unserer App verwenden werden:
Wir werden nun in der Lage sein, Fragmente zu erstellen, die Native Komponenten repetieren, z. B .:
%Vor% Ein wenig mehr Arbeit ist jedoch erforderlich. Unser Elternteil Activity muss einige Dinge in ReactInstanceManager übergeben, damit der Lebenszyklus von React Native ordnungsgemäß funktioniert. Hier ist, womit ich endete:
Schließlich werden Sie im gesamten Code den Verweis auf (MyApplication) bemerken. Dies ist ein globales Application -Objekt, das unsere ReactInstanceManager , AKA die Brücke zwischen Android und React Native enthält. Dies ist das Muster, das die Native-React-Projekte intern verwenden, also habe ich es einfach kopiert. So wird es implementiert:
Das Schwierigste war, den Lebenszyklus zwischen dem Fragment und der Aktivität herauszufinden; Der ReactRootView benötigt einen Verweis auf den Aktivitätskontext, um ihn zu instanziieren. Daher war es wichtig, dass getActivity() nicht NULL ist. Auch das Registrieren der onHostPause() und onHostResume() in der übergeordneten Aktivität war zunächst nicht intuitiv, erwies sich aber letztendlich als einfacher, sobald die ReactNativeInstanceManager in eine globale abstrahiert wurde, anstatt sie auf der Aktivität oder dem Fragment zu belassen.
Hoffe, das hilft jemand anderem da draußen!
Es gibt Bibliotheken, die das für Sie erledigen.
Eine, die ich verwende, ist react-native-android-fragment
Gemäß den Anweisungen im verknüpften GitHub-Repository:
compile 'com.github.hudl:react-native-android-fragment:v0.43.2' . z.B.
%Vor%Erzeuge deinen Code in das Fragment
Fragment reactFragment = new ReactFragment.Builder()
.setComponentName("HelloWorld")
.setLaunchOptions(launchOptions) // A Bundle of launch options
.build();
Platzieren Sie das Fragment in einem FrameLayout, das Sie in Ihrer XML-Layoutdatei hätten. In meinem Fall ist die FrameLayout ID react_holder.
getSupportFragmentManager()
.beginTransaction()
.add(R.id.react_holder, reactFragment)
.commit();
Tags und Links android-fragments react-native