react-native：在堆栈导航器中动态更新标题

Question

我已经为标题title（堆栈导航器）制作了一个自定义组件，该组件显示用户名和一些图像。在此页面上，我必须编辑用户名，成功后还要在标题中更新它

所以我的问题是如何动态更改/更新标题？

Answer 1

使用React Navigation 5和React Navigation 6，您可以这样做， 在组件中设置 Params

props.navigation.navigate("ProductDetailScreen", {
      productId: itemData.item.id,
      productTitle: itemData.item.title,
    });

并显示它

<Stack.Screen
      name="ProductDetailScreen"
      component={ProductDetailScreen}
      options={({ route }) => ({ title: route.params.productTitle })} // what 
need to add
/>

或者你可以在你的组件中使用useEffect钩子来做到这一点

useEffect(() => {
    props.navigation.setOptions({
      title: productTitle,
    });
  }, [productTitle, props.navigation]);

Answer 2

对于 React Navigation 版本 1.x、2.x、3.x 和 4.x，您可以使用下面代码中显示的方法或原始文档中的方法简单地更改标题：React Navigation - using params in标题

 static navigationOptions = ({ navigation }) => {
    const edit = navigation.getParam('edit', false);
    if(edit){
      return {
        headerTitle: 'Edit Page',
      };
    }else{
      return {
        headerTitle: 'Normal Page',
      };
    }
 };

对于 5.x 及以上版本，您可以参考以下代码。以下是expo 中官方文档和示例的链接。

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 HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Profile"
        onPress={() =>
          navigation.navigate('Profile', { name: 'Custom profile header' })
        }
      />
    </View>
  );
}

function ProfileScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile screen</Text>
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: 'My home' }}
        />
        <Stack.Screen
          name="Profile"
          component={ProfileScreen}
          options={({ route }) => ({ title: route.params.name })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Answer 3

 navigation.setOptions({ title: 'Updated!' })

参考。

Answer 4

这可以使用导航道具来完成。

您可以this.props.navigation.state.params在组件中使用以设置新属性。呼叫：

navigation.setParams({ param: value })

有关更多详细信息，请参见标题上的文档。

Answer 5

在React 5.0 或更高版本中，如果您想使用类组件，您可以执行以下操作：

 componentDidMount() {
   this.props.navigation.setOptions({
     title: `Your Updated Title`,
   })
 }