react-native - 如何在 react-native 的 createBottomTabNavigator() 中加载自定义选项卡图标

Question

我在 StackNavigator 中使用 TabNavigator，我能够将 Prop 从 StackNavigator 传递给 TabNavigator，它有四个选项卡。

其中一个名为配置文件的选项卡具有图像图标，从 URL 加载。每当我来自登录或启动屏幕时，我都可以显示来自 URL 的图像。但问题是一旦用户更改个人资料图片，我就无法更新个人资料选项卡中的个人资料图标。

这是我的代码:

这是主 StackNavigator:

import { createStackNavigator } from 'react-navigation';
import Landing from '../screens/onboarding/Landing';
import PhoneLogin from '../screens/onboarding/PhoneLogin';
import EnterCode from '../screens/onboarding/EnterCode';
import Home from './HomeTaBNavigator';


export default createStackNavigator({

Landing: {
    screen: Landing,
    navigationOptions: { header: null, }
},
PhoneLogin: {
    screen: PhoneLogin,
    navigationOptions: { header: null }
},
EnterCode: {
    screen: EnterCode,
    navigationOptions: { header: null }
},
Home: {
    screen: Home,
    navigationOptions: { header: null }
},

});

这是 TabNavigator:

import React, { Component } from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { createBottomTabNavigator, TabBarBottom } from 'react-navigation';
import Feed from '../screens/home/Feed';
// import Notification from '../screens/home/Notification';
import Notification from './NotificationNavigator';
// import Profile from '../screens/home/Profile';
import Profile from './ProfileNavigator';
// import Search from '../screens/home/Search';
import Search from './SearchNavigator';
import { Colors } from '../theme';
import ImageProgress from 'react-native-image-progress';

const styles = StyleSheet.create({

  iconProfileImg: {
    overflow: 'hidden',
    borderRadius: 12,
    width: 24,
    height: 24,
    resizeMode: 'contain',
    alignItems: "flex-start",
    justifyContent: 'flex-start',
  },
  imageContainer: {
    borderRadius: 12,
    overflow: 'hidden',
    width: 24,
    height: 24,
    alignContent: 'flex-start',
    justifyContent: 'flex-start',
  },


});

export default createBottomTabNavigator({
  Feed: {
    screen: Feed,
    navigationOptions: ({ navigation }) => ({
      header: null,
      tabBarIcon: ({ focused, tintColor }) => {
        let url = navigation.getParam('userProfileImageUrl');
        console.log('userProfileImage in Home BottomTabBar: ', url);

        return (focused ? <Image source={require('Frenemys/src/assets/tab_bar_icons/tab_1_active.png')} /> : <Image source={require('Frenemys/src/assets/tab_bar_icons/tab_1.png')} />)
      }
    })
  },
  Search: {
    screen: Search,
    navigationOptions: ({ navigation }) => ({
      header: null,
      tabBarIcon: ({ focused, tintColor }) => {
        let url = navigation.getParam('userProfileImageUrl');
        console.log('userProfileImage in Search BottomTabBar: ', url);

        return (focused ? <Image source={require('Frenemys/src/assets/tab_bar_icons/tab_2_active.png')} /> : <Image source={require('Frenemys/src/assets/tab_bar_icons/tab_2.png')} />)
      }
    })
  },
  Notification: {
    screen: Notification,
    navigationOptions: ({ navigation }) => ({
      header: null,
      tabBarIcon: ({ focused, tintColor }) => {
        let url = navigation.getParam('userProfileImageUrl');
        console.log('userProfileImage in Notification BottomTabBar: ', url);
        return (focused ? <Image source={require('Frenemys/src/assets/tab_bar_icons/tab_3_active.png')} /> : <Image source={require('Frenemys/src/assets/tab_bar_icons/tab_3.png')} />)
      }
    })
  },
  Profile: {
    screen: Profile,
    navigationOptions: ({ navigation }) => ({
      header: null,
      tabBarIcon: ({ focused, tintColor }) => {
        let url = navigation.getParam('userProfileImageUrl');
        console.log('userProfileImage in Profile BottomTabBar: ', url);
        return (
          <View style={{ marginTop: -8 }}>
            <View style={styles.imageContainer}>
              <ImageProgress
                style={styles.iconProfileImg}
                source={{ uri: url }}
                renderError={(error) => {
                  console.log('error load image: ', error)
                  return (
                    <Image
                      style={styles.iconProfileImg}
                      source={require('Frenemys/src/assets/additional_icons/profile_fallback.jpg')}
                    />
                  )
                }}
              />
            </View>
          </View>
        )
      }

    }),
  },
}, {
    tabBarOptions: {
      activeTintColor: Colors.app_green,
      inactiveTintColor: Colors.inactive_tab_black,
      showLabel: false,
      style: {
        backgroundColor: Colors.white,
      },
    },

    tabStyle: {
      width: 100,
      //backgroundColor: 'green',
    },
    // tabBarComponent: props => <TabBar navigation={props.navigation}/>,
    lazy: true,
    initialRouteName: 'Feed',
  });

现在，当我在 Profile Stack Navigator 的子组件 EditProfile.js 中更改个人资料图片时，现在我该如何更新个人资料选项卡中的图标？

编辑资料:我正在将用户数据保存在 AsyncStorage 中。

 saveUser = async (fromImageUpload, responseData) => {
    try {
      const data = fromImageUpload ? responseData.data.profile : responseData.data;
      console.log('get user: ' + JSON.stringify(data));
      await AsyncStorage.setItem(AsyncKeyss.USER, JSON.stringify(data));
      return data;

    } catch (e) {
      // saving error
      console.log(e);
    }
  }

正如我上面所说的，每当我从登录屏幕进入时，我都可以更新个人资料选项卡中的个人资料图标。

 navigation.navigate(NavigationKeys.Home, { userProfileImageUrl: userImage });

Answer 1

获取参数的方式与 let url = navigation.getParam('userProfileImageUrl'); 相同您可以在更改个人资料图片时设置参数(更新值)。

只要打电话

navigation.setParams({userProfileImageUrl: newUserProfileImageUrl })

使用新的图片 url，它会被更新。