React Native提供了多种导航库来实现页面导航,其中一种不使用堆栈的导航方式是使用React Navigation库的Tab导航。
下面是一个使用React Navigation库实现Tab导航的示例代码:
npm install @react-navigation/native
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';
const Tab = createBottomTabNavigator();
function App() {
return (
);
}
export default App;
import React from 'react';
import { View, Text } from 'react-native';
function HomeScreen() {
return (
Home Screen
);
}
export default HomeScreen;
import React from 'react';
import { View, Text } from 'react-native';
function SettingsScreen() {
return (
Settings Screen
);
}
export default SettingsScreen;
import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('MyApp', () => App);
通过以上步骤,你就可以实现一个不使用堆栈的Tab导航。在这个示例中,我们使用createBottomTabNavigator
创建了一个底部Tab导航栏,并添加了两个屏幕:Home和Settings。你可以根据自己的需求添加更多的屏幕。
下一篇:不使用多部分,发送文件