【发布时间】:2021-07-23 20:49:47
【问题描述】:
我正在尝试自己做一个小项目来了解 React-Native。
我有 2 个屏幕,我想通过按下按钮从 SplashScreen 导航到 HomeScreen。但这给了我一个错误。 我应该添加什么来消除错误?
这里是代码 应用.js
import 'react-native-gesture-handler'; // react-navigation, must be on top
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import SplashScreen from "./src/screens/SplashScreen.js";
import HomeScreen from "./src/screens/HomeScreen.js";
const Stack = createStackNavigator();
const App = () => {
return (
// name is whatever you write
// initialRouteName is which screen you want as your initial
// when I add title, it will write it as title, not whats written in "name"
<NavigationContainer>
<Stack.Navigator initialRouteName="Intro" screenOptions={{title:"helllloo"}}>
<Stack.Screen name="Intro" component={SplashScreen} options={{title:"our intro"}} />
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
HomeScreen.js
import React from "react";
import { View, Text } from "react-native";
const HomeScreen = () => {
return(
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
)
}
export default HomeScreen;
SplashScreen.js
import React from "react";
import { Text, View, Button } from "react-native";
import HomeScreen from "./HomeScreen";
const SplashScreen = ({ navigation }) => {
// without flex:1, it will center on that row, not on whole page
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Hello</Text>
<Button
title="Go to HomeScreen"
onPress = {() => navigation.navigate(HomeScreen)}
/>
</View>
)
}
export default SplashScreen;
【问题讨论】:
标签: reactjs react-native react-navigation react-navigation-v5