创建react-native基于Expo项目:路由

1,057 阅读1分钟

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>
  )
}