使用 headerMode float 的反应导航自定义标头会在导航上产生跳转/故障

Question

我在反应导航中设置了一个自定义标题。然而，在屏幕之间导航时，它似乎会轻微闪烁和故障。

这种情况有点间歇性，但大约 70% 的时间都会发生。这种情况仅在使用浮动 headerMode 时发生，因为我的标题标题不会改变屏幕模式，这并不是一个真正的选项。

Example gif

我的标题看起来像这样：

<Header style={style.header}>
  <Left style={{ paddingLeft: 10 }}>
    {props.previous ? BackButton(navigation) : null}
  </Left>
  <Body style={{ width: WIDTH - 75 }}>
    <Text style={style.title} numberOfLines={1}>App Sample</Text>
  </Body>
  <Right style={{ paddingRight: 10 }}>
    {showMenu(route) ? <TouchableOpacity hitSlop={{
      top: 10,
      bottom: 10,
      left: 10,
      right: 10
    }} onPress={() => props.toggleMenu()}>
      <Icon style={style.icon} name="md-menu" />
    </TouchableOpacity> : null}
  </Right>
</Header>

我的屏幕本身很简单，而且我导航到的屏幕类型似乎没有什么区别。

任何尝试的建议都非常感谢，否则我将不得不使用我真正想避免的屏幕 headerMode 来发布我们的应用程序。

谢谢！

Answer 1

它是关于组件的，将其更改为并使用插图。

示例：

const insets = useSafeAreaInsets();

return (
    <View styles={{paddingTop: insets.top}}>
        // stuff
    </View>
)

使用 headerMode float 的反应导航自定义标头会在导航上产生跳转/故障

问题描述投票：0回答：1

1个回答

最新问题

使用 headerMode float 的反应导航自定义标头会在导航上产生跳转/故障

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1