React Navigation - 为什么导航栏出现在 header 下面而不是底部
React Navigation - why navigation bar is appearing below header but not at the bottom
这是容器文件。
在这里,我已经为底部导航定义了所有必需的细节,它呈现在屏幕顶部,但它应该呈现在屏幕底部。
import { NavigationContainer } from "@react-navigation/native";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import HomeScreen from "./Fragments/HomeScreen";
import WalletScreen from "./Fragments/WalletScreen";
import ProfileScreen from "./Fragments/ProfileScreen";
import { StyleSheet, View } from "react-native";
const Tab = createBottomTabNavigator();
import { Platform } from "react-native";
export const tabBarHeight = Platform.OS === "ios" ? 60 : 45;
function MyTabs() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Home"
screenOptions={{
tabBarStyle: {
backgroundColor: "#03dbfc",
height: tabBarHeight,
},
tabBarActiveTintColor: "white",
}}
>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarLabel: "Home",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Wallet"
component={WalletScreen}
options={{
tabBarLabel: "Wallet",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="wallet" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarLabel: "Profile",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="face" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
export default MyTabs;
我看不到每个屏幕或片段的内容。
Home.js
import { Text } from "react-native";
const HomeScreen = ({ navigation }) => {
return <Text>Home</Text>;
};
export default HomeScreen;
Profile.js
import React from "react";
import { Text } from "react-native";
const ProfileScreen = ({ navigation }) => {
return <Text>Profile</Text>;
};
export default ProfileScreen;
Wallet.js
import React from "react";
import { Text } from "react-native";
const WalletScreen = ({ navigation }) => {
return <Text>Wallet</Text>;
};
export default WalletScreen;
请回答这个问题我是 react-native 的新手。
App.js
import { NavigationContainer } from "@react-navigation/native";
import Header from "./components/Header/Header";
import BottomNavigation from "./components/BottomNavigation/BottomNavigation";
export default function App() {
return (
<View>
<Header title="ApnaPayment" />
<BottomNavigation />
</View>
);
}
出现此问题是因为 App.js
上的 View
缩小了页面内容。您不需要创建 header 组件,react-navigation
会为您提供。我建议您删除 App.js
上的 header 组件,并将 header 标题添加为导航器上的屏幕选项。另一个提示是您不需要定义选项卡的高度,react-navigation
默认也提供了它。按照下面的示例代码。
使用导航器归档:
// Some code above...
function MyTabs() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Home"
screenOptions={{
tabBarStyle: {
backgroundColor: "#03dbfc",
},
tabBarActiveTintColor: "white",
title: "ApnaPayment",
}}
>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarLabel: "Home",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Wallet"
component={WalletScreen}
options={{
tabBarLabel: "Wallet",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="wallet" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarLabel: "Profile",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="face" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
export default MyTabs;
你的App.js:
// Some code above...
export default function App() {
return (
<BottomNavigation />
);
}
这是容器文件。 在这里,我已经为底部导航定义了所有必需的细节,它呈现在屏幕顶部,但它应该呈现在屏幕底部。
import { NavigationContainer } from "@react-navigation/native";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import HomeScreen from "./Fragments/HomeScreen";
import WalletScreen from "./Fragments/WalletScreen";
import ProfileScreen from "./Fragments/ProfileScreen";
import { StyleSheet, View } from "react-native";
const Tab = createBottomTabNavigator();
import { Platform } from "react-native";
export const tabBarHeight = Platform.OS === "ios" ? 60 : 45;
function MyTabs() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Home"
screenOptions={{
tabBarStyle: {
backgroundColor: "#03dbfc",
height: tabBarHeight,
},
tabBarActiveTintColor: "white",
}}
>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarLabel: "Home",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Wallet"
component={WalletScreen}
options={{
tabBarLabel: "Wallet",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="wallet" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarLabel: "Profile",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="face" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
export default MyTabs;
我看不到每个屏幕或片段的内容。
Home.js
import { Text } from "react-native";
const HomeScreen = ({ navigation }) => {
return <Text>Home</Text>;
};
export default HomeScreen;
Profile.js
import React from "react";
import { Text } from "react-native";
const ProfileScreen = ({ navigation }) => {
return <Text>Profile</Text>;
};
export default ProfileScreen;
Wallet.js
import React from "react";
import { Text } from "react-native";
const WalletScreen = ({ navigation }) => {
return <Text>Wallet</Text>;
};
export default WalletScreen;
请回答这个问题我是 react-native 的新手。
App.js
import { NavigationContainer } from "@react-navigation/native";
import Header from "./components/Header/Header";
import BottomNavigation from "./components/BottomNavigation/BottomNavigation";
export default function App() {
return (
<View>
<Header title="ApnaPayment" />
<BottomNavigation />
</View>
);
}
出现此问题是因为 App.js
上的 View
缩小了页面内容。您不需要创建 header 组件,react-navigation
会为您提供。我建议您删除 App.js
上的 header 组件,并将 header 标题添加为导航器上的屏幕选项。另一个提示是您不需要定义选项卡的高度,react-navigation
默认也提供了它。按照下面的示例代码。
使用导航器归档:
// Some code above...
function MyTabs() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Home"
screenOptions={{
tabBarStyle: {
backgroundColor: "#03dbfc",
},
tabBarActiveTintColor: "white",
title: "ApnaPayment",
}}
>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarLabel: "Home",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Wallet"
component={WalletScreen}
options={{
tabBarLabel: "Wallet",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="wallet" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarLabel: "Profile",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="face" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
export default MyTabs;
你的App.js:
// Some code above...
export default function App() {
return (
<BottomNavigation />
);
}