刷新反应导航选项卡导航图标

Question

我的应用程序是使用最新的基于钩子的实现的反应导航(v5.4.0)。它有一个选项卡栏导航器，其中一个选项卡代表邮件消息，图标的角上显示了必须的消息数。选项卡代码如下所示：

var messageCount = 0;
export function UpdateMessageCount(newnum:number)
{
    messageCount = newnum;
}

function MessageIcon (color:string, size:number)
{
    return (messageCount < 1)? (<FontAwesome style={{color:color, fontSize:size}} icon={LightIcons.envelope}  pro={true} />):
            (<View>
              <FontAwesome style={{color:color, fontSize:size}} icon={LightIcons.envelope}  pro={true} />
              <View style={{position:'absolute',borderRadius:20, right:-10,top:0,backgroundColor:'red',minWidth:15, height:15, justifyContent:'center', alignItems:'center'}}>
                  <Text style={{fontSize:11, color:'white', fontFamily:'Roboto-Medium',marginLeft:2,marginRight:2}}>{messageCount}</Text>
              </View>
            </View>)
}

和

const MainTab = createBottomTabNavigator();
function MainTabNavigator() {
    return (
        <MainTab.Navigator
...
             <MainTab.Screen name="Messages"
                  component={ MessageListNavigator }
                  options={{
                      tabBarIcon: ({ color, size }) => (
                          MessageIcon(color, size)
                  ),
             }}/>

当邮件数量发生变化(通过同步异步发生)时，我希望图标/选项卡导航器刷新。在导航器上设置一个假选项(如图所示)将导致选项卡导航器刷新，但它依赖于无文档化的副作用：

UpdateMessageCount(count);
let op = this.props.navigation.dangerouslyGetParent();
op.setOptions({tickle:""})

( 1)是否有其他方法可以让选项卡导航器/图标刷新？(我不使用redux)

2)是否有方法从主导航器对象获取嵌套选项卡导航器的句柄？

提前感谢您的建议和意见。

Answer 1

我解决了这个问题，方法是在消息计数发生变化时发出一个事件，并在选项卡导航器钩子中捕获该事件。稍作修改的代码如下：

function MessageIcon (messageCount:number, color:string, size:number)
{
    return (messageCount < 1)? (<FontAwesome style={{color:color, fontSize:size}} icon={LightIcons.envelope}  pro={true} />):
            (<View>
              <FontAwesome style={{color:color, fontSize:size}} icon={LightIcons.envelope}  pro={true} />
              <View style={{position:'absolute',borderRadius:20, right:-10,top:0,backgroundColor:'red',minWidth:15, height:15, justifyContent:'center', alignItems:'center'}}>
                  <Text style={{fontSize:11, color:'white', fontFamily:'Roboto-Medium',marginLeft:2,marginRight:2}}>{messageCount}</Text>
              </View>
            </View>)
}

const MainTab = createBottomTabNavigator();
function MainTabNavigator() {

    const [messageCount, setMessageCount] = useState(0);

    const messageCountListener = MyEvents.addListener(MyEventMessageCountUpdated,
                    (count)=>{
                        console.log("message count update: ", count)
                        setMessageCount(count);
                        });

    useEffect(()=> {
        return function cleanup() {
            messageCountListener.remove();
        }
    });

    return (
        <MainTab.Navigator

...

            <MainTab.Screen name="Messages"
                            component={ MessageListNavigator }
                            options={{
                              tabBarIcon: ({ color, size }) => (
                                  MessageIcon(messageCount, color, size)
                              ),
                            }}/>