小滑块水平列表视图oncamerawidget像whatsapp

Question

我有一个react native应用，用户必须单击照片或选择照片。当我选择单击时，将打开相机。我为此使用了图像选择器

但是我想在相机视图本身上添加一些小部件，例如无论何时选择相机，WhatsApp都会显示图像幻灯片列表视图。我们如何才能使用相机，并能够从显示在相机视图本身上的小型水平列表视图幻灯片中选择图像。

我正在尝试构建同一台相机以及从数千张图像中选择图像

import React, {Component} from 'react';
import {Platform, StyleSheet, View, StatusBar, TouchableOpacity, FlatList, Image, ImageBackground} from 'react-native';
import { PermissionsAndroid, CameraRoll } from 'react-native';


//const Contner = createAppContainer(Routes);

export default class App extends Component
{
    constructor(props) {
        super(props);
        z=[];
        for (let i=0; i<500; i++)
        {
            z[i]=i;
        }
        this.z = z;
        this.all_images={};
        this.state={"images":{"edges":[]}};
    }

    async requestPhotosPermission() {
        try
        {
            const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE)
            if (granted === PermissionsAndroid.RESULTS.GRANTED)
            {
                this.getPhotos();
            } else
            {
                console.log("Photos permission denied")
            }
        } catch (err)
        {
            console.warn(err)
        }
    }

    loadPhotos(){
        var self=this;
        const fetchParams = {
            first: 1000000000,
            assetType: 'Photos',
        };

        console.log("hellos");
        CameraRoll.getPhotos(fetchParams).then((data) =>
        {
            console.log("length is ", data["edges"].length);
            for (let j=0; j<data["edges"].length; j++)
            {
                this.all_images[j] = data["edges"][j]["node"]["image"]["uri"];
            }
            self.setState({"images":data});
        }).catch((e) =>
        {
            console.log(e);
        });
    }

    componentWillMount(){
        this.requestPhotosPermission().then(()=>{
            this.loadPhotos()
        });
    };

    onViewableItemsChanged = ({ viewableItems, changed }) => {
        // console.log("Visible items are", viewableItems[0],"to",viewableItems[viewableItems.length-1]);
        // console.log("Changed in this iteration", changed);
    };

    render(){
        console.log("finders");
        let self=this;
        return (
            <FlatList
                horizontal={true}
                data={this.z}
                renderItem={({item}) => {
                    console.log("item is ", item,self.state.images.edges.length);
                    // console.log(self.state.images.edges[0]);
                    if (self.state.images.edges.length!==0)
                    {
                        return <ImageBackground source={{uri: self.state.images.edges[item].node.image.uri}}
                                                style={{height: 100, width: 100, margin: 4}}/>
                    }else
                        return <View style={{height:100,width:100,margin:4,borderWidth:1,backgroundColor:'#4a7642'}}/>
                }}
                onViewableItemsChanged={this.onViewableItemsChanged }
                style={{borderWidth:3,borderColor:'red',height:'30%'}}
                viewabilityConfig={{itemVisiblePercentThreshold: 50}}/>);
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'black',
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    capture: {
        flex: 0,
        backgroundColor: '#fff',
        borderRadius: 5,
        padding: 15,
        paddingHorizontal: 20,
        alignSelf: 'center',
        margin: 20,
    },
});

我希望此列表视图覆盖在常规Camera Widget上