1

到目前为止，我一直在与expo客户一起开发。现在我创建了一个新的 RN 项目来使用原生库，如firebase和支付 API 等。

我已将我的代码从 expo 风格复制到纯 RN，所有链接和调整都是在删除对 expo 的任何使用时进行的（现在我正在使用unimodules 来替换 expo 中使用的东西，例如 constants 和 Asset。

问题：启动画面后没有渲染，而是白屏；虽然console.log表明react-navigation路由成功。我找不到自己在实际问题上归零，如果它是react-native-paperor 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 设备（小米）报告此行为。

4

0 回答 0