react-native Navigation导航器，这原因我服了

最新推荐文章于 2024-06-25 09:21:12 发布

2401_84122782

最新推荐文章于 2024-06-25 09:21:12 发布

阅读量858

点赞数 29

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

本文链接：https://blog.csdn.net/2401_84122782/article/details/137622367

版权

程序员专栏收录该内容

473 篇文章 1 订阅

订阅专栏

本文介绍了如何在ReactNative应用中通过`navigate`和`goBack`传递参数到前后页面，自定义header样式和功能，以及使用`Tab.Navigator`进行嵌套导航，包括设置图标和监听Tab的点击事件。

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

2.5.3 传递参数到之前的页面

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

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

// Some.js
import React, { useState, Component } from “react”;
import { Text, View } from “react-native”;

class App extends Component {
constructor(props) {
super(props)
}
render() {
return (

{this.props.route.params.type ? this.props.route.params.type : “has null”}

)
}
}
export default App;

// Home.js
import * 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 (

<TextInput
multiline
placeholder=“What’s on your mind?”
style={{ height: 200, padding: 10, backgroundColor: ‘gray’ }}
value={postText}
onChangeText={setPostText}
/>
<Button
title=“Go to Login”
onPress={() => goLogin(navigation, postText)}
/>

);
}
export default Some;

2.6 配置header bar

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

function App() {
return (

<Stack.Navigator>
<Stack.Screen
name=“Home”
component={Home}
options={{
title: ‘My home’,
headerStyle: {
backgroundColor: ‘#f4511e’,
},
headerTintColor: ‘#fff’,
headerTitleStyle: {
fontWeight: ‘bold’,
},
}}
/>
</Stack.Navigator>

);
}

2.7 Header Button

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

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

);
}

3.3 给 Tab 添加 icon

第一种

<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”);
} else
if (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”)
: require(“@/assets/images/icon_tab3.png”);
}

const onLongPress = () => {
navigation.emit({
type: ‘tabLongPress’,
target: route.key,
});
};

return (
<TouchableOpacity
activeOpacity={0.8}
accessibilityRole=“button”
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={{ flex: 1, paddingBottom: 8, paddingTop:8, flexDirection:“column”,justifyContent:“center”,alignItems:“center”, backgroundColor:“#fff” }}

function Some({navigation, route}) {
return (
<Tab.Navigator
tabBar={props => <MyTabBar {…props} />}

<Tab.Screen name=“HomePage” component={HomePage} />
<Tab.Screen name=“Detail” component={Detail} />
<Tab.Screen name=“Mine” component={Mine} />
</Tab.Navigator>
);
}
export default Some;