Wie man react-navigation mit create-react-native-app (CRNA) für Android-Build verwendet - react-native, react-native-android, create-react-native-app

Ich habe angefangen zu experimentieren react-native und insbesondere mit dem neuesten Ansatz mit create-react-native-app Skript. Alles scheint nach dem Auspacken einwandfrei zu funktionieren, aber wenn ich es zu benutzen versuche react-navigation für die Navigation meiner App funktioniert es nur für iOS, für Android kann nichts ohne Fehler gerendert werden. Folgende Snack ist ein Beispiel für die Verwendung und zeigt das Problem, wenn Sie das Betriebssystem unten umschalten.

Antworten:

Wurde bereits an anderer Stelle beantwortet, jedoch zugunsten von StackOverflow

Wenn auf Android ein leerer Bildschirm angezeigt wird und Sie für keine Art von React Navigation-Element eine Breite festgelegt haben, versuchen Sie, die Breite festzulegen.

Hier ist ein aktualisierter Snack, der auf Android angezeigt werden sollte: https://snack.expo.io/BJZ_aoOol

Für ein kontextfreies Beispiel wird der Stil in der TabNavigatorConfig des TabNavigators angewendet Reagieren Sie auf Navigationsdokumente Für mehr Information

const MainScreenNavigator = TabNavigator({
First: { screen: FirstScreen },
Second: { screen: SecondScreen },
},{
tabBarOptions: {
style: {
width: 300,
},
},
});

Sie können diese Breite auch auf Gerätebasis festlegen, indem Sie Folgendes verwenden:

let screenWidth = Dimensions.get("window").width;

Ich suche auch so etwas. In Ihrem Code denke ich, müssen Sie TabNavigator in StackNavigator ändern. Dann bin ich mit Peter Evans einverstanden, dass der Bildschirm nicht in Android angezeigt wird, weil es tatsächlich funktioniert, aber wir müssen die Dimension an die Breite des Bildschirms anpassen (auf Android).

Meine Lösung: in Zeile 64 füge einfach hinzu: <MainScreenNavigator style={{width: Dimensions.get("window").width}} />

Jetzt setze ich mein Experiment fort, um Redux zu verwenden.

Ich versuche nur Folgendes und es funktioniert für mich selbst:

import React from "react";
import { View, StyleSheet } from "react-native";
import { StackNavigator } from "react-navigation";
import Expo from "expo";

import Home from "./Home";
import About from "./About";

const routes = {
Home: {
name: "Home",
screen: Home
},
About: {
name: "About",
screen: About
}
};

const MainApp = StackNavigator(routes);

export default class Navigation extends React.Component {
render() {
return (
<View style={styles.container}>
<MainApp />
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
}
});

Vergessen Sie nicht, das folgende Snippet in Ihre Komponentendatei einzufügen.

 static navigationOptions = {
title: "About",
};