Question

我为标题标题（堆栈导航器）创建了一个自定义组件，它显示了用户名和一些图像。在此页面上，我必须编辑用户名并成功在标题中更新

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

Answer 1

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

您可以在组件中使用switch (op) { case '+': { return add; break;} case '-': { return subtract; break;} case '*': { return multiply; break;} case '/': { return divide; break;} default: ; }来设置新属性。拨打：

this.props.navigation.state.params

有关详细信息，请参阅the documentation on headers。

Answer 2

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

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

Answer 3

使用React Navigation 5，您可以像这样在组件中设置参数

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 4

用于反应导航版本：5.x

   const ProductDetailScreen = props => {
       const { productId } = props.route.params;
       const { productTitle } = props.route.params;

       props.navigation.setOptions({ title: productTitle });

       return  (
            <View>
                <Text>{productId}</Text>
            </View>
        );
     };

用于反应导航版本：5.x

Answer 5

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

Reference。

Answer 6

下面部分中显示的代码适用于react-navigation 2.x版本。

您可以尝试以下操作：

在我的情况下，我将导航配置保存在名为app-navigator.js的文件中

const ChatStackNavigator = createStackNavigator(
    {
        People: ListPeopleScreen, // People Screen,
        Screen2: Screen2
    },
    {
        initialRouteName: 'People'
        navigationOptions: ({navigation}) => ({
            header: <AppBar title={navigation.getParam('appBar', {title: ''}).title}/>
        }),
        cardStyle: {
            backgroundColor: 'white'
        }
    }
);

该屏幕文件如下：

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {List, ListItem} from 'react-native-elements';

class ListPeopleScreen extends Component {

    list = [
        {
            name: 'Amy Farha',
            avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
            subtitle: 'Vice President'
        },
        {
            name: 'Chris Jackson',
            avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
            subtitle: 'Vice Chairman'
        }
    ];

    componentDidMount() {
        this.props.navigation.setParams({
            appBar: {
                title: 'Clientes'
            }
        });
    }

    render() {
        return <List
            containerStyle={{marginBottom: 30}}
        >
            {
                this.list.map((item) => (
                    <ListItem
                        roundAvatar
                        avatar={{uri: item.avatar_url}}
                        key={item.name}
                        title={item.name}
                    />
                ))
            }
        </List>
    };
}

export default connect(null)(ListPeopleScreen);

注意：就我而言，我正在使用redux和组件库react-native-elements

Answer 7

您可以使用以下代码中所示的方法或原始文档中的方法简单地更改标题：React Navigation - using params in the title

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

Answer 8

在3.x和4.x版本中，可以使用静态navigationOptions函数完成

class MyComponent extends Component {
  static navigationOptions = ({navigation}) => {
    return {
      title: navigation.getParam('title', 'Fallback title');
    };
  }

  updateHeader = () => {
    // dynamically update header
    navigation.setParams({title: 'MyComponent'});
  }

  render() {
    // call updateHeader on click of any component
  }
}

Answer 9

对于 React-Navigation v3，我使用以下命令来更改堆栈的标题：

类组件：

this.props.navigation.setParams({ title: res.title });

功能组件：

props.navigation.setParams({ title: res.title });

Answer 10

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="OrdersScreen"
          component={OrdersScreen}
          options={{ title: 'My Orders' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

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

10 个答案: