我正在处理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);
启用通知.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>;
}
}
最佳答案
在您的EnableNotification.js
中,您无需默认即可导出EnableNotification
类(这是一个命名导出)。
然后在import EnableNotificationScreen from "./EnableNotification"
中使用index.android.js
导入它,这会导致错误。
你应该
a)导出默认的激活屏幕ieexport default class EnableNotification extends Component
或
b)更改为import { EnableNotification } from "./EnableNotification"
阅读有关导出类型的更多信息here