react-native Navigation导航器，重要概念一网打尽

最新推荐文章于 2024-05-16 01:08:19 发布

阿斯顿Java

最新推荐文章于 2024-05-16 01:08:19 发布

阅读量765

点赞数 13

分类专栏： Android程序员文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/m0_61369817/article/details/136852467

版权

function App() {return ( ( alert(‘

摘要由CSDN通过智能技术生成

function App() {
return (

<Stack.Navigator initialRouteName=“Login”>
<Stack.Screen options={ {headerShown: false}} name=“Login” component={Login} />
<Stack.Screen name=“Some” component={Some}
options={ {
headerRight: () => (
<Button
onPress={() => alert(‘This is a button!’)}
title=“add”
color=“#999”
/>
),
}}
/>
</Stack.Navigator>

);
}

3. 嵌套导航（Tabs）

3.1 安装依赖

npm install @react-navigation/bottom-tabs // 5.x版本

3.2 Example

// Some.js // 将之前的 Some.js 替换为以下代码
import {createBottomTabNavigator} from ‘@react-navigation/bottom-tabs’;
import * as React from ‘react’;
import { View, Button, Text } from ‘react-native’;

const Tab = createBottomTabNavigator(); //

function HomePage() {
return (
<View
style={ {
flex: 1,
backgroundColor: ‘#ccc’,
justifyContent: ‘center’,
alignItems: ‘center’,
}}>
HomePage
<Button
title=“Go to Profile”
onPress={() => navigation.push(‘Login’)}
/>

);
}

function Detail({navigation}) {
return (
<View
style={ {
flex: 1,
backgroundColor: ‘#ddd’,
justifyContent: ‘center’,
alignItems: ‘center’,
}}>
Detail

);
}
function Mine({navigation}) {
return (
<View
style={ {
flex: 1,
backgroundColor: ‘#ddd’,
justifyContent: ‘center’,
alignItems: ‘center’,
}}>