在Expo Go和Android中使用SafeAreaView和BottomNavigation

在React Native with Expo Go中，我尝试在Expo Go中使用with。但是，当将底部导航 Package 到SaveAreaView中时，底部导航不显示。
下面的代码与SafeAreaView：

// components/HomeScren.js

// Import for React
import React, { useState } from "react";
import { SafeAreaView } from "react-native-safe-area-context";

// Import for React Native Paper
import { Text, BottomNavigation } from 'react-native-paper';

const MusicRoute = () => <Text>Music</Text>;

const AlbumsRoute = () => <Text>Albums</Text>;

const RecentsRoute = () => <Text>Recents</Text>;

const NotificationsRoute = () => <Text>Notifications</Text>;

export const HomeScreen = ({ navigation }) => {
    const [index, setIndex] = useState(0);
    const [routes] = useState([
        { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},
        { key: 'albums', title: 'Albums', focusedIcon: 'album' },
        { key: 'recents', title: 'Recents', focusedIcon: 'history' },
        { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },
      ]);
    
    const renderScene = BottomNavigation.SceneMap({
        music: MusicRoute,
        albums: AlbumsRoute,
        recents: RecentsRoute,
        notifications: NotificationsRoute,
    });
    return (
        <SafeAreaView>
            <BottomNavigation
                navigationState={{ index, routes }}
                onIndexChange={setIndex}
                renderScene={renderScene}
            />
        </SafeAreaView>
    )
}

通过Expo Go应用程序

在Android上显示结果屏幕
当我删除SaveAreaView时，底部导航显示。

// components/HomeScren.js

// Import for React
import React, { useState } from "react";
import { SafeAreaView } from "react-native-safe-area-context";

// Import for React Native Paper
import { Text, BottomNavigation } from 'react-native-paper';

const MusicRoute = () => <Text>Music</Text>;

const AlbumsRoute = () => <Text>Albums</Text>;

const RecentsRoute = () => <Text>Recents</Text>;

const NotificationsRoute = () => <Text>Notifications</Text>;

export const HomeScreen = ({ navigation }) => {
    const [index, setIndex] = useState(0);
    const [routes] = useState([
        { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},
        { key: 'albums', title: 'Albums', focusedIcon: 'album' },
        { key: 'recents', title: 'Recents', focusedIcon: 'history' },
        { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },
      ]);
    
    const renderScene = BottomNavigation.SceneMap({
        music: MusicRoute,
        albums: AlbumsRoute,
        recents: RecentsRoute,
        notifications: NotificationsRoute,
    });
    return (
            <BottomNavigation
                navigationState={{ index, routes }}
                onIndexChange={setIndex}
                renderScene={renderScene}
            />
    )
}

上面代码的截图：

package.json的内容

{
  "name": "myapp",
  "version": "2.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "expo": "~48.0.10",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-native": "0.71.6",
    "react-native-paper": "^5.6.0",
    "react-native-safe-area-context": "^4.5.1",
    "react-native-screens": "~3.20.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

有没有办法在保存区域视图中使用底部导航？

因此，基于React Native文档https：//reactnative.dev/docs/safeareaview#example中的安全区视图，安全区视图应该使用flex样式：1.
我错过了这一点，因为我使用的是来自https://www.npmjs.com/package/react-native-safe-area-context的安全区域视图，而不是来自默认的react原生包。
完成下面的工作代码。注意底部的附加样式表。

// components/HomeScren.js

// Import for React
import React, { useState } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { StyleSheet } from "react-native";

// Import for React Native Paper
import { Text, BottomNavigation } from 'react-native-paper';

const MusicRoute = () => <Text>Music</Text>;

const AlbumsRoute = () => <Text>Albums</Text>;

const RecentsRoute = () => <Text>Recents</Text>;

const NotificationsRoute = () => <Text>Notifications</Text>;

export const HomeScreen = ({ navigation }) => {
    const [index, setIndex] = useState(0);
    const [routes] = useState([
        { key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},
        { key: 'albums', title: 'Albums', focusedIcon: 'album' },
        { key: 'recents', title: 'Recents', focusedIcon: 'history' },
        { key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },
      ]);
    
    const renderScene = BottomNavigation.SceneMap({
        music: MusicRoute,
        albums: AlbumsRoute,
        recents: RecentsRoute,
        notifications: NotificationsRoute,
    });
    return (
        <SafeAreaView style={ styles.safeArea }>
            <BottomNavigation
                navigationState={{ index, routes }}
                onIndexChange={setIndex}
                renderScene={renderScene}
            />
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    safeArea: {
      flex: 1,
    },
  });

Expo Go中的结果屏幕

在Expo Go和Android中使用SafeAreaView和BottomNavigation

1条答案

相关问题

热门标签

最新问答