React Native + Expo Необещаемый отказ && TypeError: Null не является объектом (если переменная изображения - NULL) - PullRequest
0 голосов
/ 19 апреля 2020

Я студент старшего курса, новичок в реагировании, родной, node JS и expo.io, и поэтому я сталкиваюсь с такими проблемами, как оповещение NSNull, а Null не является объектом и т. Д. c ... Я пытаюсь опубликуйте картинку с описанием, и она работает в метро, ​​которое предоставляется на выставке, но это не работает в приложении IOS, что немного странно ... Пожалуйста, помогите мне, как объявить это изображение как null или не как неопределенная переменная. Вот мой исходный код:

import React from 'react'
import {View, Text, StyleSheet, SafeAreaView, TouchableOpacity, Image, TextInput} from 'react-native'
import {Ionicons} from '@expo/vector-icons';
import Constants from "expo-constants";
import * as Permissions from "expo-permissions";
import Fire from '../Fire'
import * as ImagePicker from 'expo-image-picker'
const firebase = require('firebase');
require("firebase/firestore");

export default class PostScreen extends React.Component{
    state = {
            text: "",
            image: undefined
    };
    componentDidMount(){
        this.getPhotoPermission();
}
getPhotoPermission = async () => {
    if (Constants.platform.ios){
        const {status} = await Permissions.askAsync(Permissions.CAMERA_ROLL)
        if(status != "granted"){
            alert("We need permission to access your camera roll");
        }
    }
};
handlePost = () => {
    Fire.shared.addPost({text: this.state.text.trim(),localUri: this.state.image}).then(ref => {
        this.setState({text: "", image: undefined})
        this.props.navigation.goBack();
        }).catch(error => {
            alert(error);
        })
    };
    pickImage = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
            allowsEditing: true,
            aspect: [4, 3]
        });
        if(!result.cancelled) {
            this.setState({image: result.uri});
        }
    };
    render(){
        return(
            <SafeAreaView style={styles.container}>
                <View style={styles.header}>
                    <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
                        <Ionicons name="md-arrow-back" size={24} color="#D8D9DB"></Ionicons>
                   </TouchableOpacity>
                    <TouchableOpacity onPress={this.handlePost}>
                        <Text style={{fontWeight: "500"}}>Post</Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.inputContainer}>
                    <Image 
                        source={require("../assets/tempAvatar.jpg")}
                        style={styles.avatar}
                    ></Image>
                    <TextInput 
                        autoFocus={true} 
                        multiline={true} 
                        numberOfLines={4}
                        style={{flex: 1}} 
                        placeholder="Want to share something?"
                        onChangeText={text => this.setState({text})}
                        value={this.state.text}
                ></TextInput>
            </View>
            <TouchableOpacity style={styles.photo} onPress={this.pickImage}>
                <Ionicons name="md-camera" size={32} color="#D8D9DB"></Ionicons>
                </TouchableOpacity>
                <View style={{marginHorizontal: 32, marginTop: 32, height: 150}}>
                <Image source={{uri: this.state.image}} style={{width: "100%", height: "100%"}}>        
   </Image>
                </View>
            </SafeAreaView>
        );
        }
    }
    const styles = StyleSheet.create({
        container: {
        flex: 1,
    },
    header: {
        flexDirection: "row",
        justifyContent: "space-between",
        paddingHorizontal: 32,
        paddingVertical: 12,
        borderBottomWidth: 1,
        borderBottomColor: "#D8D9DB"
    },
    inputContainer: {
        margin: 32,
        flexDirection: "row"
    },
    avatar: {
        width: 50,
        height: 50,
        borderRadius: 24,
        marginRight: 20
    },
    photo: {
        alignItems: "flex-end",
        marginHorizontal: 32
    }
});

Вот предупреждение, которое я получаю:

[Unhandled promise rejection: ReferenceError: Can't find variable: atob]
- node_modules/@firebase/firestore/dist/index.cjs.js:12539:7 in <anonymous>
- node_modules/color-convert/route.js:87:28 in module.exports
* http://192.168.0.101:19001/node_modules/expo/AppEntry.bundle? 
 platform=ios&dev=true&minify=false&hot=false:189969:120 in <unknown>
- node_modules/@firebase/firestore/dist/index.cjs.js:2351:15 in t.G
- node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:25 in setImmediate$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:194:17 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:458:30 in callImmediates
* [native code]:null in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:407:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:142:17 in __guard$argument_0
* [native code]:null in flushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
Promise Rejection Handled (id: 0)
This means you can ignore any previous messages of the form "Possible Unhandled Promise Rejection         
(id: 0):"
- node_modules/expo/build/environment/muteWarnings.fx.js:18:23 in warn
- node_modules/react-native/Libraries/Promise.js:44:19 in require.enable$argument_0.onHandled
- node_modules/promise/setimmediate/rejection-tracking.js:87:26 in onHandled
- node_modules/promise/setimmediate/rejection-tracking.js:33:18 in Promise._37
- node_modules/promise/setimmediate/core.js:93:16 in handle
- node_modules/promise/setimmediate/core.js:77:9 in Promise.prototype.then
* http://192.168.0.101:19001/node_modules/expo/AppEntry.bundle?    
platform=ios&dev=true&minify=false&hot=false:188544:27 in <unknown>
- node_modules/@firebase/firestore/dist/index.cjs.js:2327:5 in <anonymous>
- node_modules/@firebase/firestore/dist/index.cjs.js:10471:8 in Ur.md.next$argument_0
* http://192.168.0.101:19001/node_modules/expo/AppEntry.bundle?    
platform=ios&dev=true&minify=false&hot=false:195481:19 in <unknown>
* http://192.168.0.101:19001/node_modules/expo/AppEntry.bundle? 
platform=ios&dev=true&minify=false&hot=false:174950:58 in <unknown>
- node_modules/promise/setimmediate/core.js:45:7 in tryCallTwo
- node_modules/promise/setimmediate/core.js:200:23 in doResolve
- node_modules/promise/setimmediate/core.js:66:12 in Promise
* http://192.168.0.101:19001/node_modules/expo/AppEntry.bundle?    
platform=ios&dev=true&minify=false&hot=false:174949:61 in _callee$
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:274:30 in invoke
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:135:28 in invoke
- node_modules/regenerator-runtime/runtime.js:145:19 in PromiseImpl.resolve.then$argument_0
- node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:25 in setImmediate$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:194:17 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:458:30 in callImmediates
* [native code]:null in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:407:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:142:17 in __guard$argument_0
* [native code]:null in flushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
[Unhandled promise rejection: ReferenceError: Can't find variable: atob]
- node_modules/@firebase/firestore/dist/index.cjs.js:12539:7 in <anonymous>
- node_modules/color-convert/route.js:87:28 in module.exports
* http://192.168.0.101:19001/node_modules/expo/AppEntry.bundle?    
platform=ios&dev=true&minify=false&hot=false:189969:120 in <unknown>
- node_modules/@firebase/firestore/dist/index.cjs.js:2351:15 in t.G
- node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:25 in setImmediate$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:194:17 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:458:30 in callImmediates
* [native code]:null in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:407:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:142:17 in __guard$argument_0
* [native code]:null in flushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
...