在另一个屏幕上更改状态也会更改DrawerNavigation的状态

Question

在我的DrawerNavigator中，我有配置文件屏幕和许多其他屏幕，但是出于这个问题的目的，我将以我的配置文件屏幕为例。这就是我设置DrawerNavigator的方式。

Navigation.js

const AppDrawerNavigator = createDrawerNavigator(
  {
    Home: { screen: DashboardStackNavigator },
    Profile: { screen: ProfileStack },
    Calendar: { screen: CalendarStack },
    Rewards: { screen: RewardsStack },
    FeedbackForm: { screen: FeedbackStack },
    ChangePassword: { screen: ChangePasswordStack },
    Login: { screen: Login },
  },
  {
    contentComponent: ({ navigation }) => <DrawerContainer navigation={navigation} />
  }
);

我的DrawerContainer从WebApi ProfileDetails 获取数据，并根据获取的数据设置在DrawerContainer中显示的图像。我将获取状态，项目的setState到响应，并根据imageUrl设置Image。

DrawerContainer.js

            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('Profile')}>
              <Image
                source={{ uri: items[0].imageUrl }}
                style={styles.photo} />
            </TouchableOpacity>

当我在图像上按时，我将导航到“个人资料”屏幕，在这里我可以更改ProfileImage以及其他信息，例如Bio。由于ProfileImage仅显示在“抽屉导航器”中，因此我只用Image来解决这个问题。

Profile.js

就像DrawerNavigator一样，“配置文件”屏幕还将从WebApi ProfileDetails 中获取其数据，并根据imageUrl显示“图像”。 SelectImage（）调用一个函数，供用户打开图库并选择新图像。

选择图像后，用户将按保存按钮，该按钮会将imageUrl的值更新为新的图像链接。

          <TouchableOpacity
            onPress={() => this.selectImage()}>
            <View style={styles.piccontainer}>
              <Image
                source={{ uri: this.state.items[0].imageUrl }}
                style={styles.photo} />
            </View>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button}
              onPress={() => {
                this.uploadImage();
                this.goBack()
              }}>
              <View>
                <Text style={styles.text}>Save</Text>
              </View>
          </TouchableOpacity>

//uploadImage(), uploading image to s3 and updating the link in my webapi
uploadImage = () => {
    this.setState({
      loading: true
    })
    let file = this.state.file;
    let config = this.state.config;
    const { navigation } = this.props
    RNS3.put(file, config)
      .then((response) => {
        this.setState({
          items: this.state.items.map((item, i) =>
            i == 0 ?
              { ...item, imageUrl: response.headers.Location } : item),
          params: {
            ImageUrl: response.headers.Location,
            EmployeeBio: this.state.items[0].employeeBio
          },
        }, () => { this.updateProfileData(this.state.params) })
      })
  }

//goBack(), return to previous screen
goBack = () => {
    const { navigation } = this.props;
    navigation.goBack();
  }

发生这种情况时，我也想在DrawerContainer上更新Image，但无法这样做。我也有DrawerContainer的addListener，但是它似乎没有更新Image。我有什么办法可以在DrawerContainer中显示更新的图像？

DrawerContainer.js

这些已添加到DrawerContainer中，但仍无法正常工作。

  componentDidMount() {
    const { navigation } = this.props;
    this.focusListener = navigation.addListener('didFocus', () => {
      // The screen is focused
      this.getProfileData();
    });
  }

  componentWillUnmount() {
    // Remove the event listener
    this.focusListener.remove();
  }