react-native Navigation 导航器，kotlin 协程使用

}

每次调用推送时，我们都会向导航堆栈添加新路由。当您调用导航时，它首先尝试查找具有该名称的现有路由，并且只有在堆栈上还没有新路由时，才会推送新路由。

这样就完成了一个堆栈导航了，可以完成登录注册这种类似页面的切换了。

2.5 导航器（路由）传参

2.5.1 嵌套在导航内的参数

将路由上需要的参数放在一个对象里，作为 navigation.navigate 函数的第二个参数：navigation.navigate('RouteName', {key: value}) ，在组件中获取这个参数：route.params。

navigation.navigate('Home', {screen: 'Settings',params: { user: 'Tom' },});

2.5.2 更新参数

页面上也可以更新参数，类似更新页面状态。navigation.setParams就可以用来更新页面参数

你也可以向页面传递一些初始参数。如果导航到页面并没有设置任何参数，这个初始参数将会被使用。它们会与传递的参数进行浅合并。初始参数被指定为 initialParams 属性:

<Stack.Screenname="Login"component={Login}initialParams={{ userId: 42 }}/>

2.5.3 传递参数到之前的页面

不仅仅能传递参数到新的页面，也能传递参数到之前的页面。

想做到这个，你可以使用navigate的方法，如果页面存在的话，可以使用像 goBack 这样的方法。你可以通过navigate携带参数将参数传回去：

// Some.jsimport React, { useState, Component } from "react";import { Text, View } from "react-native";

class App extends Component {constructor(props) {super(props)}render() {return (<View><Text>{this.props.route.params.type ? this.props.route.params.type : "has null"}</Text></View>)}}export default App;

// Home.jsimport * as React from 'react';import { View, TextInput, Button } from 'react-native';function goLogin(navigation, postText) {navigation.push("Login", {type: postText}) // 把输入框的值传递给 Login 页面}function Some({navigation, route}) {let {text} = route.params;let [postText, setPostText] = React.useState(text);return (<View><TextInputmultilineplaceholder="What's on your mind?"style={{ height: 200, padding: 10, backgroundColor: 'gray' }}value={postText}onChangeText={setPostText}/><Buttontitle="Go to Login"onPress={() => goLogin(navigation, postText)}/></View>);}export default Some;

2.6 配置 header bar

自定义 header 样式有 3 个关键属性：headerStyle, headerTintColor ,和 headerTitleStyle。

function App() {return (<NavigationContainer><Stack.Navigator><Stack.Screenname="Home"component={Home}options={{title: 'My home',headerStyle: {backgroundColor: '#f4511e',},headerTintColor: '#fff',headerTitleStyle: {fontWeight: 'bold',},}}/></Stack.Navigator></NavigationContainer>);}

2.7 Header Button

给 header 右侧添加一个操作按钮--常见功能

function App() {return (<NavigationContainer><Stack.Navigator initialRouteName="Login"><Stack.Screen options={{headerShown: false}} name="Login" component={Login} /><Stack.Screen name="Some" component={Some}options={{headerRight: () => (<ButtononPress={() => alert('This is a button!')}title="add"color="#999"/>),}}/></Stack.Navigator></NavigationContainer>);}

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(); //

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

function HomePage() {return (<Viewstyle={{flex: 1,backgroundColor: '#ccc',justifyContent: 'center',alignItems: 'center',}}><Text>HomePage</Text><Buttontitle="Go to Profile"onPress={() => navigation.push('Login')}/></View>);}

function Detail({navigation}) {return (<Viewstyle={{flex: 1,backgroundColor: '#ddd',justifyContent: 'center',alignItems: 'center',}}><Text>Detail</Text></View>);}function Mine({navigation}) {return (<Viewstyle={{flex: 1,backgroundColor: '#ddd',justifyContent: 'center',alignItems: 'center',}}><Text>Mine</Text></View>);}function Some({navigation, route}) {return (<Tab.Navigator><Tab.Screen name="HomePage" component={HomePage} /><Tab.Screen name="Detail" component={Detail} /><Tab.Screen name="Mine" component={Mine} /></Tab.Navigator>);}export default Some;

3.3 给 Tab 添加 icon

第一种

function TabNav() {return (<Tab.NavigatorinitialRouteName="HomePage"screenOptions={({ route }) => ({tabBarIcon: ({ focused, color, size }) => {let icon;if (route.name === 'HomePage') {icon = focused? require("@/assets/images/icon_tab1_active.png"): require("@/assets/images/icon_tab1.png");} elseif (route.name === 'Detail') {icon = focused? require("@/assets/images/icon_tab2_active.png"): require("@/assets/images/icon_tab2.png");}else if (route.name === 'Mine') {icon = focused? require("@/assets/images/icon_tab3_active.png"): require("@/assets/images/icon_tab3.png");}return <Image style={styles.tabImg} source={icon}></Image>},})}

<Tab.Screen name="HomePage" component={Home} /><Tab.Screen name="Detail" component={Geo} /><Tab.Screen name="Mine" component={Mine} />

</Tab.Navigator>);}

第二种 [reactnavigation.org/docs/bottom…](

)

function MyTabBar({ state, descriptors, navigation }) {const focusedOptions = descriptors[state.routes[state.index].key].options;

if (focusedOptions.tabBarVisible === false) {return null;}

return (<View style={{ flexDirection: 'row' }}>{state.routes.map((route, index) => {const { options } = descriptors[route.key];const label =options.tabBarLabel !== undefined? options.tabBarLabel: options.title !== undefined? options.title: route.name;

const isFocused = state.index === index;

let icon;if (label === 'HomePage') {icon = isFocused? require("@/assets/images/icon_tab1_active.png"): require("@/assets/images/icon_tab1.png");} elseif (label === 'Detail') {icon = isFocused? require("@/assets/images/icon_tab2_active.png"): require("@/assets/images/icon_tab2.png");}else if (label === 'Mine') {icon = isFocused? require("@/assets/images/icon_tab3_active.png")