React navigation 5 自定义 header 组件在打开已发布的应用程序时导致崩溃

Question

我想在 React 导航 5 中拥有自己的 header 组件。在 development 和 production 模式下一切正常，但是，当我构建项目时，在我的 phone 上打开它并按以下'Settings' 屏幕显示 没有错误日志 并使我的应用程序崩溃。我正在使用 react native elements 作为自定义 header 组件。

我使用的版本：

react-navigation/bottom-tabs^5.4.5
react-navigation/native^5.4.0
react-navigation/stack^5.3.7
expo-linear-gradient~8.2.1

我已经解构了一些东西并得出以下代码无法正常工作的结论

       <Stack.Navigator 
        screenOptions={{
            header: () => (
                <Header
                    leftComponent={{ text: 'Settings', style: [t.textWhite] }}
                    rightComponent={<Icon name='user' type='font-awesome' color={'white'} />}
                    linearGradientProps={{
                        colors: ['#2c5282', '#3b8b85'],
                        start: { x: 0, y: 0.5 },
                        end: { x: 1, y: 0.5 },
                      }}
                />
            ),
        }}
        initialRouteName="SettingsIndex"
    >

有人知道怎么解决吗？

编辑（发现问题）

问题是由我的 header 属性中的 'linearGradientProps' 引起的。所以这可能是 react-native-elements 或 react-nativation 崩溃。

linearGradientProps={{
   colors: ['#2c5282', '#3b8b85'],
   start: { x: 0, y: 0.5 },
   end: { x: 1, y: 0.5 },
}}

Answer 1

嗯，我觉得你没有仔细阅读文档 https://reactnativeelements.com/docs/header/#lineargradient-usage 这是您错过的示例 LinearGradient

import { Header } from 'react-native-elements';
import LinearGradient from 'react-native-linear-gradient';

...

<Header
  ViewComponent={LinearGradient} // Don't forget this!
  linearGradientProps={{
    colors: ['red', 'pink'],
    start: { x: 0, y: 0.5 },
    end: { x: 1, y: 0.5 },
  }}
/>

React navigation 5 自定义 header 组件在打开已发布的应用程序时导致崩溃

React navigation 5 custom header component causes crash when opening published app

javascript

reactjs

react-native

react-navigation

react-native-elements