迁移到 v5 后图像大小调整不起作用

Question

当前行为

在 react navigation v4 中，我使用了这段代码并且工作得很好。它确实调整了我的徽标图像 (300x80) 以完全适合并缩放到我的 80 像素标题中。

现在迁移到 v5 后，它不再扩展。就像“resizeMode”停止工作一样。

const navigationOptions = { headerTitle: <Image style={{height: 45}} resizeMode="contain" source={require('../assets/images/encabezado-1.png')}/>, headerStyle: { backgroundColor: 'white', shadowColor: 'none', }, headerTitleAlign: 'center', headerTitleStyle: { fontWeight: 'normal', fontFamily: 'Montserrat-SemiBold', }, }

预期行为

我希望我的图像能够被正确地包含和缩放。就像在 v4 中一样：

如何重现

将图像添加到 headerTitle 并尝试 resizeMode。

您的环境

• 安卓 9
  • @react-navigation/native 5.2.2
  • @react-navigation/stack 5.2.3
  • react-native-gesture-handler 1.6.1
  • react-native-safe-area-context 0.7.3
  • react-native-screens 2.4.0
  • react-native 0.61.5
  • 节点 12.6.1

Answer 1

resizeMode 仍在工作。您可以在 Stack.Screen -> options -> title 属性中使用。

代码示例：

<TakeSendStack.Navigator initialRouteName={"TakeSend"}>
      <TakeSendStack.Screen name="TakeSend" options={{ title: <Image style={{height: 45}} source={require('../assets/logo/logo.png')}/> }} component={TakeSend} />
</TakeSendStack.Navigator>

添加调整大小模式

<TakeSendStack.Navigator initialRouteName={"TakeSend"}>
      <TakeSendStack.Screen name="TakeSend" options={{ title: <Image style={{height: 45}} resizeMode="contain" source={require('../assets/logo/logo.png')}/> }} component={TakeSend} />
</TakeSendStack.Navigator>