为啥我的相机胶卷模式是空的？

Posted 2023-02-23

【中文标题】为啥我的相机胶卷模式是空的？

【英文标题】：Why is my camera roll modal empty?为什么我的相机胶卷模式是空的？

【发布时间】：2018-02-08 21:12:34

【问题描述】：

我正在尝试按照 React Native 文档访问 Camera Roll。我尝试将相机胶卷图像包装在Modal Component 中。当我按下“打开相机胶卷”按钮时，Modal 从底部出现，“关闭模式”按钮可见，但 none 来自相机胶卷的图像。

当我没有将它包裹在 Modal 中时，图像会出现，但它们会破坏我屏幕上所有组件的布局，这就是为什么我（未成功）尝试将它放在 @ 987654325@.

另外，如果您能给我一些关于如何使图像可选择并以每行 3 张图像显示的提示，我们将不胜感激。

    import React from 'react';
    import  CameraRoll, Image, Modal, ScrollView, Text, View  from 'react-native';
    import  Button  from 'react-native-elements';

    export default class AddEvent extends React.Component 
        constructor(props)
            super(props)
            this.state = 
                modalVisible: false,
                photos: [],
            
        

        getPhotos = () => 
            CameraRoll.getPhotos(
                first: 100,
            )
            .then(r => this.setState( photos: r.edges ))
            .catch((err) => 
                alert('Error loading camera roll');
                return;
            );
        

        openModal() 
            this.getPhotos();
            this.setState(modalVisible:true);
        

        closeModal() this.setState(modalVisible:false);

        static navigationOptions = ( navigation ) => 
            return 
                headerTitle: (<Text>Camera Roll Test</Text>),
            
        ;

        render()
        return (
            <View>
                <Modal
                    visible=this.state.modalVisible
                    animationType='slide'
                    onRequestClose=() => this.closeModal()>
                    <ScrollView>
                        this.state.photos.map((p, i) => 
                            return (
                                <Image
                                    key=i
                                    style=width: 300, height: 100,
                                    source= uri: p.node.image.uri />
                            );
                        )
                    </ScrollView>
                    <Button
                        onPress=() => this.closeModal()
                        title="Close modal"/>
                </Modal>
                <Button
                    onPress=() => this.openModal()/>
            </View>
        );
    

【问题讨论】：

尝试为 Modal 添加样式

嗯，我添加了flex、justifyContent和backgroundColor，但仍然没有图像

尝试为 Modal 和 ScrollView 设置固定宽度和高度

仍然没有显示

你曾经调用过 getPhotos() 吗？您有一个触发 this.openModal() 的按钮，但看起来您刚刚忘记从 openModal() 调用 this.getPhotos()！

【参考方案1】：

知道了，flex: 1 需要 <ScrollView> 样式和 contentContainerStyle。看起来不是很好，但照片显示。归功于 reddit 上的 u/Mingli91。

import React from 'react';
import  CameraRoll, Image, Modal, ScrollView, StyleSheet, Text, View  from 'react-native';
import  Button  from 'react-native-elements';


const Dimensions = require('Dimensions');
const window = Dimensions.get('window');
const screenWidth = window.width;
const screenHeight = window.height;


export default class AddEvent extends React.Component 
    constructor(props)
        super(props)
        this.state = 
            modalVisible: false,
            photos: [],
        
    

    getPhotos = () => 
        CameraRoll.getPhotos(
            first: 100,
        )
        .then(r => this.setState( photos: r.edges ))
        .catch((err) => 
            alert('Error loading camera roll');
            return;
        );
    

    openModal() 
        this.getPhotos();
        this.setState(modalVisible:true);
    

    closeModal() this.setState(modalVisible:false);

    static navigationOptions = ( navigation ) => 
        return 
            headerTitle: (<Text>Camera Roll Test</Text>),
        
    ;

    render()
        return (
            <View>
                <Modal style=styles.modal
                    visible=this.state.modalVisible
                    animationType='slide'
                    onRequestClose=() => this.closeModal()>
                    <ScrollView style=flex: 1
                        contentContainerStyle= height: 100, width: 300 >
                        this.state.photos.map((p, i) => 
                            return (
                                <Image
                                    key=i
                                    style=width: 300, height: 100,
                                    source= uri: p.node.image.uri />
                            );
                        )
                    </ScrollView>
                    <Button
                        onPress=() => this.closeModal()
                        title="Close modal"/>
                </Modal>
                <Button
                    onPress=() => this.openModal()/>
            </View>
        );
    


const styles = StyleSheet.create(
    modal: 
        flex: 1,
        alignItems: 'center',
        width: screenWidth,
        height: screenHeight,
    
);

【参考方案2】：

android 10

如果您在 Android 10 上开始注意到此问题，请尝试将其添加到您的 AndroidManifest.xml：

<application
  ...
  android:requestLegacyExternalStorage="true" />

Android 正在转向“范围存储”。他们开始在 Android 10 中使用此功能，可以通过将 android:requestLegacyExternalStorage="true" 添加到您的 AndroidManifest.xml 文件来选择退出。

但是，从 Android 11 开始，这是一项强制更改，您的 android:requestLegacyExternalStorage 值将被忽略。

在这里阅读更多：

https://developer.android.com/training/data-storage/use-cases#opt-out-scoped-storage

在这里发帖是因为这是我们的问题，而且很难找到。