javascript - 似乎无法理解为什么我的背景图像轮播不起作用？

Question

不明白为什么我的背景轮播不起作用。我试图在我的应用程序的背景轮播上方放置一个静态 Logo 和一些其他组件，但我相信我有一些错误，只是不知道到底是什么。目前收到“React.createElement:类型无效” 任何帮助将不胜感激。

这是我的BackgroundCarousel.js 文件

import React from 'react';
import {StyleSheet, View, ScrollView, Dimensions, Image} from 'react-native'

const DEVICE_WIDTH = Dimensions.get('window').width;

class BackgroundCarousel extends React.Component {
    scrollRef = React.createRef();
    constructor(props) {
        super(props);

        this.state = {
            selectedIndex: 0
        }

    }


    render() {
        const {images} = this.props
        const {selectedIndex} = this.state
        return (
            <View style= {{height: "100%", width: "100%"}}>
                <ScrollView horizontal pagingEnabled>
                    {images.map(image => (
                        <Image
                            key={image}
                            source={{uri: image}}
                            style={styles.backgroundImage}
                        />
                    ))}
                </ScrollView>

            </View>
        )
    }
}

const styles = StyleSheet.create ({
    backgroundImage: {
        height: "100%",
        width: DEVICE_WIDTH
    }

});

export { BackgroundCarousel}

这是我的 App.js 文件

import { StyleSheet, Text, View, ImageBackground, 
  Image, TextInput, Dimensions, Platform } from 'react-native';
import { Button } from './components/button.js'
import { BackgroundCarousel } from './components/BackgroundCarousel.js'

const images = [
"./images/basketball.jpg",
"./images/network.jpg",
"./images/memories.jpg",
"./images/photographer.jpg"
];



/* Logo for login page */
import logo from './Icon/iconpersons.png'

const { width: WIDTH } = Dimensions.get('window')

export default function App() {
  return (
    <View style= {styles.carouselContainer}>
      <BackgroundCarousel images={images}>

        <View style={styles.logoContainer}>
          <Image source={logo} style={styles.logo}/>
          <Text style={styles.logoText}>Hello World</Text>
        </View>

        <View>
          <TextInput 
              style={styles.input}
              placeholder={'Username'}
              placeholderTextColor={'rgba(255, 255, 255, 0.7)'}
              underlineColorAndroid= 'transparent'

          />
        </View>

        <View>
          <Button>
            Let's Get Started
          </Button>
        </View>

        </BackgroundCarousel>
        </View>
  );
} 

Answer 1

这可能是因为您将图像源 Prop 作为 source={{uri: image}} 传递，而您在 Prop 中传递本地存储图像。你应该做的是。

{images.map(image => (
  <Image
     key={image}
     source={require(image)}
     style={styles.backgroundImage}
   />
))}

或者您可以将图像数组编辑为:

const images = [
    require("./images/basketball.jpg"),
    require("./images/network.jpg"),
    require("./images/memories.jpg"),
    require("./images/photographer.jpg)"
];