React-navigation：如何在单个StackNavigator中使用不同的headerBackTitles

Question

我正在为react-native应用程序使用react-navigation。我已经阅读了关于headerBackTitle的文档，但我无法弄清楚如何设置不同的headerBackTitle来从堆栈中的不同屏幕导航。

当从EditProfile导航到MyProfile时，我想要headerBackTitle：来说Cancel。

当从Comments导航到MyProfile时，我希望headerBackTitle说Go back。

目前，从评论和编辑个人资料到我的个人资料都说qazxsw poi。我该如何做到这一点？

Cancel

Answer 1

另一种方法是制作自己的标题，就像这样

Comments.js

const MyProfileStack = createStackNavigator({
  MyProfile: {
    screen: profile,
    navigationOptions: {
      headerTitle: "My Profile",
      headerBackTitle: 'Cancel'
    }
  },
  Comments: { 
    screen: comments, 
    navigationOptions: {
      headerTitle: "Comments"
    },
  },
  EditProfile: {
    screen: editProfile,
    navigationOptions: {
      headerTitle: "Edit Profile"
    },
  }
})

EditProfile.js

class Comments extends React.Component{
 render(){
  return(
     <View style={{flex:1}}>
      <View style={styles.header}>
        <Text onPress={() => this.props.navigation.goBack(null)}>Go Back</Text>
        <Text>Comments</Text>
      </View>
     </View>
     )
    }
   }