路线 'EnableNotification' 应该声明一个屏幕

Question

我正在研究 react-native 并尝试集成 react-navigation https://reactnavigation.org/docs/intro/ 进行导航。我在实施过程中遇到了一些困难。

index.android.js

**
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import {
  AppRegistry,
  Image,
  View,
  Text,
  Button,
  StyleSheet
} from "react-native";
import { StackNavigator } from "react-navigation";
import EnableNotificationScreen from "./EnableNotification";

class SplashScreen extends Component {
  render() {
    console.disableYellowBox = true;
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Image source={require("./img/talk_people.png")} />
        <Text style={{ fontSize: 22, textAlign: "center" }}>
          Never forget to stay in touch with the people that matter to you.
        </Text>
        <View style={{ width: 240, marginTop: 30 }}>
          <Button
            title="CONTINUE"
            color="#FE434C"
            onPress={() => navigate("EnableNotification")}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#FFFFFF",
    alignItems: "center",
    justifyContent: "center",
    padding: 16,
    flex: 1,
    flexDirection: "column"
  }
});

const ScheduledApp = StackNavigator(
  {
    Splash: { screen: SplashScreen },
    EnableNotification: { screen: EnableNotificationScreen }
  },
  {
    initialRouteName: "Splash"
  }
);

AppRegistry.registerComponent("Scheduled", () => ScheduledApp);

EnableNotification.js

/**
 * https://github.com/facebook/react-native
 * @flow
 */

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

export class EnableNotification extends Component {
  render() {
    return <View><Text>Enable Notification</Text></View>;
  }
}

Answer 1

现在您正在注册 Scheduled 组件。您应该做的是注册 ScheduledApp 组件。

目前 ScheduledApp 未被使用，因此无法找到您正在导航到的 EnableNotification 屏幕。

像这样注册您的应用程序：

AppRegistry.registerComponent("Scheduled", () => ScheduledApp);

我也经常做的是定义初始路线是什么。您可以像这样定义 initialRouteName 来做到这一点：

const ScheduledApp = StackNavigator({
  Splash: { screen: SplashScreen },
  EnableNotification: { screen: EnableNotification }
}, {
  initialRouteName: 'Splash'
});

Answer 2

在您的 EnableNotification.js 中，您没有默认导出 EnableNotification class（这是命名导出）。

然后您在 index.android.js 中使用 import EnableNotificationScreen from "./EnableNotification" 导入它，这导致了错误。

你应该

a) 默认导出您的 EnableNotification 屏幕，即 export default class EnableNotification extends Component 或

b) 更改为 import { EnableNotification } from "./EnableNotification"

详细了解导出类型 here

路线 'EnableNotification' 应该声明一个屏幕

Route 'EnableNotification' should declare a screen

android

reactjs

react-native

react-navigation

index.android.js

EnableNotification.js