資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 React Native 中使用導航時如何處理錯誤？
問題：在 React Native 中使用導航時，如何處理“導航器只能包含'Screen'元件作為其直接子元素”的錯誤？
解決方案
在開發應用程式時，您可能會遇到上述問題。在這裡，我們將瞭解為什麼會出現此類錯誤以及如何避免它。
以下是導致錯誤的程式碼：
示例
App.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, View, Alert, Text } from 'react-native';
const Stack = createStackNavigator();
const HomePage = ({ navigation }) => {
return (
<Button title="Click Here" onPress={() => navigation.navigate('About',
{ name: 'About Page' })}/>
);
};
const AboutPage = () => {
return <Text>You have reached inside About Page!</Text>;
};
const MyStack = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomePage}
options={{ title: 'From home page : Navigation' }}
/>
<Stack.Screen name="About" component={AboutPage} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default MyStack;在編譯過程中，命令提示符中顯示的錯誤如下：
手機螢幕上顯示的錯誤如下：
錯誤原因 - 導航器只能包含'Screen'元件作為其直接子元素
錯誤的第一個原因是縮排錯誤。每個元件的縮排都非常必要。子元素應在父元件內正確縮排。
第二種情況是每個元件末尾留有空格。刪除螢幕末尾的空格，然後重新編譯。它將正常工作。從其他來源複製貼上程式碼時請注意。您在這些情況下最常遇到此錯誤。
現在讓我們縮排上述程式碼，並刪除任何空格。以下是帶有輸出的最終程式碼。
示例
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, View, Alert, Text } from 'react-native';
const Stack = createStackNavigator();
const HomePage = ({ navigation }) => {
return (
<Button title="Click Here" onPress={() => navigation.navigate('About',
{ name: 'About Page' })}/>
);
};
const AboutPage = () => {
return <Text>You have reached inside About Page!</Text>;
};
const MyStack = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomePage} options={{ title:
'From home page : Navigation' }} />
<Stack.Screen name="About" component={AboutPage} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default MyStack;
更新於：2021-07-01
1K+ 次檢視
廣告