react-native Navigation导航器，retrofit源码

最新推荐文章于 2024-04-05 13:20:49 发布

m0_60607397

最新推荐文章于 2024-04-05 13:20:49 发布

阅读量818

点赞数 21

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

本文链接：https://blog.csdn.net/m0_60607397/article/details/136786918

版权

Android程序员专栏收录该内容

10 篇文章 0 订阅

订阅专栏

React Native 0.60及更高版本，链接是自动的。因此，不需要运行 react-native link

如果在Mac上并为iOS开发，您需要安装Pad（通过Cocoapods）以完成链接

npx pod-install ios

在 App.js 或者 index.js 拷贝进以下代码

import ‘react-native-gesture-handler’;

2. 创建一个堆栈导航器（Stack Navigation）

2.1 安装堆栈导航依赖

npm install @react-navigation/stack

2.2 navigation 可用 API

在所有的页面组件中都可以获取到navigation属性（只要组件被定义为路由配置和使用React Navigation来渲染路由）。

// const {route, navigation} = this.props; // class写法
// 可用api
navigation.navigate(“RouteName”) // 如果新路由不在堆栈中，则将其推到堆栈导航器，否则将跳转到这个页面。
navigation.push(“RouteName”) // 跳转去相关路由页面可以多次跳转到相同路由页面
navigation.goBack() // 返回上一个页面
navigation.popToTop() // 回到堆栈的第一个屏幕页面
navigation.popToTop() // 回到堆栈的第一个屏幕页面
navigation.popToTop() // 回到堆栈的第一个屏幕页面

2.3 Example

// In App.js in a new project

import * as React from ‘react’;
import { View, Text, Button } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;

function LoginScreen({navigation}) {
return (
<View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}>
Login Screen
<Button title=“User Login” onPress={() => navigation.navigate(“Home”)}>

);
}
function HomeScreen({navigation}) {
return (
<View style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }}>
Home Screen
<Button title=“Home Page” onPress={() => navigation.navigate(“Login”)}>

);
}

const Stack = createStackNavigator();
// 想隐藏第一个标题的头部导航
// <Stack.Screen name=“Login” options={{headerShown: false}} component={LoginScreen} />

function App() {
return (

<Stack.Navigator>
// options={({ route }) => ({ title: route.params.name })} // 头部导航可以根据路由参数动态修改
<Stack.Screen name=“Login” component={LoginScreen} />
<Stack.Screen name=“Home” component={HomeScreen} />
</Stack.Navigator>

);
}

export default App;

2.4 设置stack堆栈导航动画

内置了相应的跳转动画

forHorizontal：从右向左进入
forVertical：从下向上进入
forFadeFromBottomAndroid：从底部淡出
forFade：无动画

function App() {
return (

<Stack.Navigator>
<Stack.Screen name=“Login” component={LoginScreen} />
// Home页面添加从右向左进入动画
<Stack.Screen name=“Home” component={HomeScreen} options={{headerShown: false, cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS}} />
</Stack.Navigator>

);
}

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

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

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.Screen
name=“Login”
component={Login}
initialParams={{ userId: 42 }}
/>

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>

);