Реагирующая навигация на вкладке навигации ничего не отображает, в то время как журналы предлагают успешную маршрутизацию - PullRequest
Новая
       23

Реагирующая навигация на вкладке навигации ничего не отображает, в то время как журналы предлагают успешную маршрутизацию

0 голосов
/ 25 мая 2019

Я работаю с expo клиентом до сих пор. Теперь я создал новый проект RN для использования собственных библиотек, таких как firebase , API платежей и т. Д.

Я скопировал свой код из expo-аромата в чистый RN со всеми связями и корректировками, сделанными при удалении любого использования expo (сейчас я использую unimodules для замены используемых вещей из expo, таких как константы и Asset .

Проблема: Ничего не отображается после заставки, кроме белого экрана; хотя console.log показывает, что react-navigation успешно маршрутизируется. Я не могу сосредоточиться на фактической проблеме, если это с react-native-paper или react-navigation, или это что-то не хватает в настройках gradle и т. Д.

Я предоставляю фрагменты кода ниже, чтобы указать направление, если таковое имеется.

index.js

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import { ApolloProvider } from "react-apollo";
import { Provider as PaperProvider } from "react-native-paper";
import client from "./lib/init-apollo";
import theme from "./src/theme/theme";
import AppContainer from "./src/AppContainer";

// [React native screens code needs to be executed before first render of a navigation screen](https://github.com/kmagiera/react-native-screens#usage-with-react-navigation-without-expo)
import { useScreens } from "react-native-screens";
useScreens();

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <ApolloProvider client={client}>
        <PaperProvider theme={theme}>
          <View style={styles.container}>
            <AppContainer />
          </View>
        </PaperProvider>
      </ApolloProvider>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  }
});

AppContainer.js 

import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import { createStackNavigator, createAppContainer } from "react-navigation";
import colors from "./theme/colors";

import ExploreTab from "./tabs/ExploreTab";
import DummyTab from "./tabs/DummyTab";

// Bottom nav tab
const TabsRoot = createMaterialBottomTabNavigator(
  {
    Explore: { screen: ExploreTab },
    Products: { screen: DummyTab },
    Saved: { screen: DummyTab },
    Cart: { screen: DummyTab },
    Account: { screen: DummyTab }
  },
  {
    initialRouteName: "Explore",
    order: ["Explore", "Products", "Saved", "Cart", "Account"],
    barStyle: {
      backgroundColor: colors.WHITE,
      paddingBottom: 2,
      marginTop: 2
    },
    activeColor: colors.primary,
    inactiveColor: colors.accent
  }
);

const AppRoot = createStackNavigator(
  {
    Tabs: {
      screen: TabsRoot,
      navigationOptions: ({ navigation }) => ({
        header: null
      })
    }
  },
  {
    cardStyle: { backgroundColor: "#fba" }
  }
);

export default createAppContainer(AppRoot);

ExploreTab.js

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import Icon from "react-native-vector-icons/MaterialIcons";

const ExploreTab = props => {
  console.log("Explore Tab is here", props);
  props.navigation.navigate("Products");
  return (
    <View style={styles.container}>
      <Text>I am Explore Tab</Text>
    </View>
  );
};

ExploreTab.navigationOptions = {
  tabBarLabel: <Text style={{ fontWeight: "bold" }}>Explore</Text>,
  tabBarIcon: ({ focused, tintColor }) => (
    <Icon name="store" color={tintColor} size={24} />
  )
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center"
  }
});

export default ExploreTab;

DummyTab.js

import React from "react";
import { View, Text, StyleSheet } from "react-native";

const DummyTab = props => {
  console.log("Dummy Tab is here", props);
  return (
    <View style={styles.container}>
      <Text style={{ fontWeight: "bold", fontSize: 20 }}>
        I am a dummy tab...
      </Text>
    </View>
  );
};

DummyTab.navigationOptions = {
  tabBarLabel: <Text style={{ fontWeight: "bold" }}>Dummy</Text>
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center"
  }
});

export default DummyTab;

Вывод: Отображается пустой белый экран, и консоль записывает это: 

Explore Tab is here {screenProps: undefined, navigation: {…}}
Dummy Tab is here {screenProps: undefined, navigation: {…}}

Это говорит о том, что экраны для вкладок отображаются, и навигация происходит от ExploreTab до ProductsTab. Но возвращенные компоненты React не отображаются. это боль!

Примечание. Я сообщаю об этом из окон и устройства Android (Xiaomi).

...