無法讀取 null 的屬性“props” - React Native

Question

我有一個 2 個月前發布的移動應用程序。 我現在必須做出一些改變。 在此之前，我升級了 android studio，所以我的 sdk 也升級到了 28。因此我遇到了幾個問題，但我找到了解決方案。

但是現在，當我在模擬器上運行我的應用程序時，我在某些事件上遇到了錯誤。

TypeError: TypeError: Cannot read property 'props' of null

This error is located at:
    in PickerAndroid (at Picker.js:159)
    in Picker (at Picker.android.js:11)
    in PickerNB (at connectStyle.js:384)
    in Styled(PickerNB) (at HomeScreen.js:626)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:153)
    in AnimatedComponent (at TouchableOpacity.js:256)
    in TouchableOpacity (at Item.js:383)
    in Item (at connectStyle.js:384)
    in Styled(Item) (at HomeScreen.js:624)
    in RCTView (at View.js:45)
    in View (at ScrollView.js:852)
    in RCTScrollView (at ScrollView.js:977)
    in ScrollView (at HomeScreen.js:623)
    in RCTView (at View.js:45)
    in View (at HomeScreen.js:622)
    in RCTView (at View.js:45)
    in View (at HomeScreen.js:620)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:153)
    in AnimatedComponent (at createAnimatableComponent.js:571)
    in withAnimatable(View) (at src/index.js:455)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at Modal.js:230)
    in RCTView (at View.js:45)
    in View (at Modal.js:250)
    in RCTModalHostView (at Modal.js:238)
    in Modal (at src/index.js:468)
    in ReactNativeModal (at HomeScreen.js:619)
    in RCTView (at View.js:45)
    in View (at react-native-drawer/index.js:579)
    in RCTView (at View.js:45)
    in View (at react-native-drawer/index.js:566)
    in Drawer (at Drawer/index.js:10)
    in Drawer (at HomeScreen.js:614)
    in HomeScreen (at navigationStore.js:448)
    in Wrapped (at SceneView.js:9)
    in SceneView (at StackViewLayout.js:478)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.js:477)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.js:476)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:153)
    in AnimatedComponent (at screens.native.js:59)
    in Screen (at StackViewCard.js:42)
    in Card (at createPointerEventsContainer.js:26)
    in Container (at StackViewLayout.js:507)
    in RCTView (at View.js:45)
    in View (at screens.native.js:83)
    in ScreenContainer (at StackViewLayout.js:401)
    in RCTView (at View.js:45)
    in View (at StackViewLayout.js:400)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:49)
    in RCTView (at View.js:45)
    in View (at Transitioner.js:141)
    in Transitioner (at StackView.js:19)
    in StackView (at createNavigator.js:57)
    in Navigator (at createKeyboardAwareNavigator.js:11)
    in KeyboardAwareNavigator (at createNavigationContainer.js:376)
    in NavigationContainer (at Router.js:97)
    in App (at Router.js:122)
    in Router (at App.js:59)
    in App (at renderApplication.js:34)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:33)

This error is located at:
    in NavigationContainer (at Router.js:97)
    in App (at Router.js:122)
    in Router (at App.js:59)
    in App (at renderApplication.js:34)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:33)
<unknown>
    PickerAndroid.android.js:87:16
mapSingleChildIntoContext
    react.development.js:1170:25
traverseAllChildrenImpl
    react.development.js:1043:4
traverseAllChildrenImpl
    react.development.js:1059:22
traverseAllChildren
    react.development.js:1114:9
mapIntoWithKeyPrefixInternal
    react.development.js:1192:2
Object.mapChildren [as map]
    react.development.js:1214:2
PickerAndroid._this._stateFromProps
    PickerAndroid.android.js:86:33
new
    PickerAndroid.android.js:69:23
<unknown>
    createClassProxy.js:98:23

當我使用這個組件時，我看到了這個錯誤。

    import React, { Component } from "react";
    import {
        View,
        Text,
        StyleSheet,
        TouchableOpacity,
TouchableHighlight
    } from "react-native";

    import Modal from "react-native-modal";

    import { Item, Label, Input, Textarea, Button } from 'native-base';

    import { HEADERBG } from './../Helper/config';

    import FontAwesome from 'react-native-vector-icons/FontAwesome';

    import ImagePicker from 'react-native-image-crop-picker';

    class NewPost extends Component {

        constructor(props){
            super(props);
            this.state = {
                category: null,
                messageText: null,
                isModalVisible: this.props.isVisible
            }

            this._toggleModal = this._toggleModal.bind(this);
        }

        _toggleModal(){
            this.setState({
                isModalVisible: !this.state.isModalVisible
            })
        }



        render() {
            return (
                <Modal style={{ flexDirection: 'column', justifyContent: 'flex-start' }} isVisible={this.props.isVisible}>
                    <View style={styles.container}>
                        <Text allowFontScaling={false} style={styles.headText}>Yeni Paylaşım Yap</Text>
                        <View style={styles.form}>
                            <Item style={styles.item} stackedLabel>
                                <Label style={styles.label}>Mesaj Kategorisi2</Label>
                                <Input onChangeText={(text) => this.setState({ email: text })} style={{padding: 10, borderWidth: 1/3, borderColor: 'gray', color: '#212121'}} blurOnSubmit={false} placeholder="E-Posta adresiniz" />
                            </Item>
                            <Item style={styles.item} stackedLabel>
                                <Label style={styles.label}>Mesajınız</Label>
                                <Text allowFontScaling={false}area rowSpan={5} bordered placeholder="Textarea" style={{ borderWidth: 1/4, color: '#212121', width: '100%' }} />
                            </Item>
                            <Item style={styles.item} stackedLabel>
                                <TouchableOpacity onPress={() => this.openPicker()} style={styles.imageButton}>
                                    <Text allowFontScaling={false} style={styles.imageText}>Görsel Seçin</Text>
                                </TouchableOpacity>
                            </Item>
                            <Button style={styles.sendButton} block>
                                <FontAwesome name="paper-plane" size={20} color="#fff" />
                                <Text allowFontScaling={false} style={{marginLeft: 5, fontSize: 16, color: '#fff'}}>Kapıyı Tıklat!</Text>
                            </Button>
                            <Button onPress={() => this._toggleModal()} style={{backgroundColor: '#E74C3C', marginVertical: 10}} block>
                                <FontAwesome name="times-circle" size={20} color="#fff" />
                                <Text allowFontScaling={false} style={{marginLeft: 5, fontSize: 16, color: '#fff'}}>Vazgeç!</Text>
                            </Button>
                        </View>
                    </View>
                </Modal>
            );
        }
    }

Answer 1

你的錯誤可能在這里： isModalVisible: this.props.isVisible

如果你沒有從 props 傳遞任何東西，你應該在 state 中寫isModalVisible: false 。

為什么有3個downvotes？ 如果某人是新來的，我們應該嘗試了解他們的問題並解決問題

Answer 2

我認為問題在於 react-native-image-crop-picker 包！ 嘗試更新它並重新配置它！