时间戳

首页 > 解决方案 > React Navigation 5自定义标题组件在打开已发布的应用程序时导致崩溃

javascript - React Navigation 5自定义标题组件在打开已发布的应用程序时导致崩溃

问题描述

我想在React 导航 5中拥有自己的标题组件。在开发和生产模式下一切正常，但是，当我构建项目时，在手机上打开它并按以下“设置”屏幕，它没有给我任何错误日志并使我的应用程序崩溃。我使用react native 元素作为自定义标头组件。

我正在使用的版本：

我已经解构了一些东西，得出的结论是以下代码不起作用

       <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"
    >

有谁知道如何解决？

编辑（发现问题）

该问题是由我的标头属性中的“linearGradientProps”引起的。因此，这可能是 react-native-elements 或 react-native 崩溃。

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

标签： javascriptreactjsreact-nativereact-navigationreact-native-elements

解决方案

嗯，我认为您没有仔细阅读文档 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 },
  }}
/>

推荐阅读