React Native LinearGradient导入错误求助：元素类型无效

错误根源 #

• 导入错误：LinearGradient并非react-native内置组件，你从react-native库中导入会得到undefined，这是触发错误的核心原因。
• props写法错误：你将colors、start等组件属性写在了<LinearGradient>标签的闭合标签外部，不符合React组件的语法规范。

修复步骤 #

1. 安装正确的渐变组件包 #

由于你使用了Expo（导入了expo-status-bar），推荐安装Expo官方维护的渐变组件：

npx expo install expo-linear-gradient

2. 修正导入语句 #

删除原代码中从react-native导入的LinearGradient，改为从expo-linear-gradient导入：

import { LinearGradient } from 'expo-linear-gradient';

3. 修正组件属性写法 #

将所有LinearGradient的属性（如colors、start）移至起始标签内，同时避免重复设置style属性：

修正后的完整代码 #

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
const bgImage = require('./img/car.gif');

export default function App() {
  return (
    <LinearGradient
      style={styles.container}
      colors={['rgb(32, 38, 57)', 'rgb(63, 76, 119)']}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
      locations={[0.2, 0.6, 0.8]}
    >
      <Text style={styles.title}>JDM LEGENDS</Text>
      <Image source={bgImage} style={styles.image} />
      <Text style={styles.title2}>Welcome Car Enthusiast!</Text>
      <Text style={styles.title3}>This Application is intended for Car lovers specifically the JDM legends. This is a Free Access Application Open for every car enthusiast out there!</Text>
      <StatusBar style="auto" />

      <TouchableOpacity
        onPress={() => {
          // handle onPress
        }}>
        <View style={styles.button}>
          <Text style={styles.buttonText}>GET CAR-STED</Text>
        </View>
      </TouchableOpacity>
    </LinearGradient>
  );
}

补充说明 #

如果是裸React Native项目（未使用Expo），则需安装react-native-linear-gradient，导入方式改为import LinearGradient from 'react-native-linear-gradient';，其余写法一致。

内容的提问来源于stack exchange，提问作者sidyei