stacknavigator react native set title of top menu

Question

我有一个这样创建的菜单：

import {createStackNavigator} from 'react-navigation';

   const stackNav = createStackNavigator({
    Main: {
   screen: JourneeService,
    navigationOptions: ({navigation}) => ({
     headerTitle: <StackNavTitle title="Journée de Service " />,
      headerStyle: {
    backgroundColor: '#0088CE',
     },
    headerTintColor: '#fff',
    headerTitleStyle: {
       fontWeight: 'bold',
    },

    headerLeft: (
    <TouchableOpacity
      onPress={() => navigation.openDrawer()}
      style={{width: '150%'}}>
      <Icon name="ios-menu" size={35} color="#fff" style={{padding: 10}} />
    </TouchableOpacity>
  ),
}),
 }

使用 StackNavTitle ：

class StackNavTitle extends Component {
constructor(props){
    super(props);

}

render() {
    return <Text style={{fontWeight: 'bold', color:'#fff', fontSize:20}}> 
  {this.props.title}.   
  </Text>;
   }
  }

在代码上我通过回调检索标题我想动态设置标题我该怎么做？

提前感谢您的回复

Answer 1

您可以为标题提供一个函数，该函数根据文档接受三个参数，其中一个包含动态标题。这是我从文档中获取并使用您的标题组件更新的示例

import {createStackNavigator} from 'react-navigation';

   const stackNav = createStackNavigator({
    Main: {
   screen: JourneeService,
    navigationOptions: ({navigation}) => ({
     headerTitle: ({allowFontScaling, style, children})=> <StackNavTitle title={children.title} />,
      headerStyle: {
    backgroundColor: '#0088CE',
     },
    headerTintColor: '#fff',
    headerTitleStyle: {
       fontWeight: 'bold',
    },

    headerLeft: (
    <TouchableOpacity
      onPress={() => navigation.openDrawer()}
      style={{width: '150%'}}>
      <Icon name="ios-menu" size={35} color="#fff" style={{padding: 10}} />
    </TouchableOpacity>
  ),
}),
 }

你可以在这里找到更多信息https://reactnavigation.org/docs/4.x/stack-navigator#headertitle