React Navigation5.x 动态修改标题内容

本文主要是介绍React Navigation5.x 动态修改标题内容，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

React Navigation

官方文档

搭建环境

# 安装全局依赖
$ npm install -g expo-cli
# 生成种子模板
expo init <projectName> [--npm]

安装 ReactNavigation

# 安装依赖
$ yarn add @react-navigation/native
# 安装依赖
$ yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
# 安装依赖
yarn add @react-navigation/stack

代码展示

options={({ route }) => ({ title: route.params?.name })} 主要通过该属性配置实现

接口文档

源码地址

App.js

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import DetailsScreen from "./page/details"const Stack = createStackNavigator();function App() {return (<NavigationContainer><Stack.Navigator initialRouteName="Details"><Stack.Screen name="Details" component={DetailsScreen} options={({ route }) => ({ title: route.params?.name })}/></Stack.Navigator></NavigationContainer>);
}export default App;

details.js

navigation.setOptions({title: text}) 通过该方法动态设置标题

源码地址

import React from 'react';
import { StyleSheet, TextInput, Text, View } from 'react-native';export default function DetailsScreen({navigation}) {const {setOptions} = navigationreturn (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text>Details Screen</Text><TextInput style={styles.input} onChangeText={text=>{setOptions({title: text})}}/></View>);
}const styles = StyleSheet.create({input: {width: 200,height:50,backgroundColor: '#ccc'}
})