1.创建项目
//初始化项目指令:
npx create-expo-app StickerSmash
//进入项目目录
cd StickerSmash
//下载依赖
npx expo install react-dom react-native-web @expo/webpack-config
2.运行项目
npx expo start
3.下载导航栏所需的依赖(React Navigation)
npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack
4.如果底部也需要菜单,需要用到第三方插件
npm install @react-navigation/bottom-tabs
App.js具体实例:
import * as React from 'react'
import { Text, View } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import Home from './components/Home'
function HomeScreen () {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
)
}
function SettingsScreen () {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
)
}
const Tab = createBottomTabNavigator()
export default function App () {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
<Tab.Screen name="Page" component={Home} />
</Tab.Navigator>
</NavigationContainer>
)
}