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} = navigation
  return (
    <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'
  }
})