0

「react-native-image-slider-box」ライブラリを使用して画像カルーセルを作成しようとしています。ライブラリ クラスとパラメータを適切に構成しましたが、モバイル エキスポ アプリで画像カルーセルを表示できません。

私が使用したコード:

import React, { Component } from 'react';
import { StyleSheet,  View } from 'react-native';
import { SliderBox } from 'react-native-image-slider-box';
import { HomeGrid } from './HomeGrid';

export default class Home extends Component {
    constructor() {
        super();
        this.state = {
        images: [
            require('./commonComponents/photos/photo2.jpeg'),
            require('./commonComponents/photos/photo3.jpg'),
            require('./commonComponents/photos/photo4.jpg'),
            require('./commonComponents/photos/photo3.jpg'),
        ]
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <SliderBox
                    images= { {uri: this.state.images } }
                    sliderBoxHeight={400}
                    onCurrentImagePressed={index =>
                        console.warn(`image ${index} pressed`)
                    }
                />
                <HomeGrid />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
      flex: 1
    }
  });

そして、画像は次のようなディレクトリ内に存在します。

ProjectName
   ---> src
       ---> components
                ---> commonComponents
                        ---> photos
                                ---> photo1.jpeg

これでどこが間違っているのですか?画像スライダーを機能させるにはどうすればよいですか? 出力には HomeGrid コンポーネントのみが表示され、SliderBox コンポーネントは表示されません。

4

1 に答える 1