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

Question

不明白为什么我的背景轮播不起作用。 我试图在我的应用程序的背景轮播上方放置一个静态徽标和其他一些组件，但我相信我有一些错误，只是不知道究竟是什么。 目前获得“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

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

{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)"
];

Answer 2

你有一些小问题。 您的图像是静态的，因此您只应使用 require 而不是 uri 即可解决您的问题。 这段代码可以解决您的问题。

应用程序.js

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

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

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

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

const styles = StyleSheet.create({
    carouselContainer: {
        height: "100%",
        width: "100%",
        backgroundColor: '#fff'
    }

});

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 {
    constructor(props) {
        super(props);

        this.state = {
            selectedIndex: 0
        }
        scrollRef = React.createRef();
    }

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

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

});

export default BackgroundCarousel;