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

Question

我正在尝试按照 React Native 文档访问 Camera Roll. I have tried wrapping the camera roll images in a Modal Component。当我按下 'Open Camera Roll' 按钮时，Modal 从底部出现，'close modal' 按钮可见，但图像 none从相机胶卷。

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

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

    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>
        );
    }
}

Answer 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,
    }
});

Answer 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

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

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

Why is my camera roll modal empty?

javascript

modalviewcontroller

camera-roll

react-native

Android 10