Question

到目前为止，我一直在与expo客户进行开发。现在，我创建了一个新的RN项目，以使用firebase和付款API等本地库。

我已将我的代码从expo风格复制到纯RN，并已删除了对expo的任何使用（现在我正在使用unimodules to replace stuffs in use from expo like constants and 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组件不会被渲染。那就是痛苦！

注意：我正在从Windows和Android设备（Xiaomi）报告此行为。

当日志提示路由成功时，React导航选项卡导航不呈现任何内容

0 个答案: