React native 如何在不重新渲染所有子组件的情况下更新材质底部选项卡标记文本？

我使用了

createMaterialBottomTabNavigator

和redux来更改徽章文本。代码如下：

class Router extends React.PureComponent {


  constructor(props) {
    super(props);


    this.state = {}
  }
   componentDidMount() { 

    this.props.appAct()
    this.props.getCartAct()
  }

  HomeStack = () => (
    <Stack.Navigator headerMode={'none'}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Product" component={ProductStack} />
    </Stack.Navigator>
  )
  CartStack = () => (
    <Stack.Navigator headerMode={'none'}>
        <Stack.Screen name="Cart" component={CartScreen} />
        <Stack.Screen name="Product" component={ProductStack} />
    </Stack.Navigator>
 )



  render() {


    let { internet, showIntro } = this.props;

     if (!internet) return <NoInternetScreen />
     if (showIntro) return <AppIntro />

    return (
      <NavigationContainer ref={navigationRef}>
      
       <Tab.Navigator
            style={{ backgroundColor: "transparent", overflow: "hidden" }}
            initialRouteName="Home"
            activeColor="#ac85f2"
            inactiveColor={Colors.dark50}
            barStyle={{
                borderColor: Colors.dark70,
                overflow: 'hidden',
                borderTopWidth: 1,
                borderLeftWidth: 1,
                borderRightWidth: 1,
                backgroundColor: "#eee"
            }}
        >
            <Tab.Screen
                name="Home"
                component={HomeStack}
                options={{
                    tabBarLabel: <Text default> home </Text>,
                    tabBarIcon: ({ color }) => (
                        <MaterialCommunityIcons name="home" color={color} size={26} />
                    ),
                }}

            />

            <Tab.Screen
                name="Cart"
                component={CartStack}
                options={({ route }) =>

                    ({
                        tabBarLabel: <Text default> cart </Text>,
                        tabBarBadge: props.cart.length, // <= here it changes the badge text
                        tabBarIcon: ({ color }) => (
                            <MaterialCommunityIcons name="cart-outline" color={color} size={26} />
                        ),
                    })
                }

            />
        </Tab.Navigator>
      </NavigationContainer>
    )
  }
}



function mapStateToProps(state) {
  return { 
    internet: state.appReducer.internet,
    showIntro: state.appReducer.showIntro, 
    cart: state.appReducer.cart,
  }
}
function mapDispatchToProps(dispatch) {
  return {
    appAct: () => dispatch(appAction()), 
    getCartAct: () => dispatch(getCartAction()), 

  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Router)

---

有没有办法在不重新渲染其他组件的情况下更改

tabBarBadge

prop？

最后，在我的头重重地撞到墙上之后，我找到了答案： 已将图标和标题移动到新组件：

export const CartTabnavigator = (props) => {
    const dispatch = useDispatch()

    const color = props.color

    useEffect(() => {
        console.log("props.cart", props.cart)
        dispatch(getCartAction())
    }, [])

    return (
        <View>
            <MaterialCommunityIcons name="cart-outline" color={color} size={26} style={{
                transform: [
                    { scaleX: -1 }
                ]
            }} />

            <View style={{ position: 'absolute', right: -5, top: -5, backgroundColor: Colors.red20, borderRadius: 9, width: 15, height: 15, justifyContent: 'center', alignItems: 'center' }}>
                <Text white style={{ fontSize: 10, fontFamily: config.font }} >{props.cart.length}</Text>
            </View>
        </View>
    );

}


const mapStateToProps = state => ({
    cart: state.cartReducer.cart,
})

function mapDispatchToProps() {
    return {}
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(CartTabnavigator)

export const CartTabnavigator=（道具）=>{
const dispatch=usedpatch（）
const color=props.color
useffect（（）=>{
console.log（“props.cart”，props.cart）
分派（getCartAction（））
}, [])
返回(
{props.cart.length}
);
}
常量mapStateToProps=状态=>({
购物车：state.cartReducer.cart，
})
函数mapDispatchToProps（）{
返回{}
}
导出默认连接(
MapStateTops，
mapDispatchToProps
)（CartTabnavigator）

并在navigator中使用它，如：

<Tab.Screen
    name="Cart"
    component={this.CartStack}
    options={({ route }) =>
        ({
          tabBarLabel: <Text default> سبد خرید </Text>,
          tabBarIcon: ({ color }) => (
            <CartTabNavigator color={color} />
          ),
         })
    }
 />

({
tabBarLabel:，
tabBarIcon:（{color}）=>(
),
})
}
/>

它就是这样工作的。如果你不想让整个屏幕重新显示，也许你可以创建一个单独的组件来容纳该图标，这样状态就会保持分离。你能提供任何示例代码或任何有帮助的东西吗？检查此链接（可能的解决方案）也要记住，当你已经在使用

useDispatch

时，您还可以同时使用

useSelector

和forego

connect

&

mapstatetops

。是！谢谢，我确实重构了它，但没有把我的最终代码放在这里。谢谢你的通知

<Tab.Screen
    name="Cart"
    component={this.CartStack}
    options={({ route }) =>
        ({
          tabBarLabel: <Text default> سبد خرید </Text>,
          tabBarIcon: ({ color }) => (
            <CartTabNavigator color={color} />
          ),
         })
    }
 />