Question

我正在StackNavigator中使用TabNavigator，我能够将道具从具有四个标签的StackNavigator传递到TabNavigator。

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

这是我的代码：

这是Main 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中更改个人资料图片时，现在如何更新“个人资料”标签中的图标？

EditProfile：我正在将用户数据保存在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 })

使用新的图片网址，它将被更新。

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

1 个答案: