reactjs - Android Emulator TypeError：试图分配给只读属性。反应原生

Question

当我尝试在 Android Emulators 和 Android 上启动 react-native 应用程序时遇到问题

设备。在 IOS 模拟器上，它工作正常并且没有出现消息。

我正在尝试进行修改，但出现了消息。

消息：“TypeError：试图分配给只读属性。”

我的代码：

import React, {useEffect, useState} from 'react';
import {
  Dimensions,
  SafeAreaView,
  View,
  TouchableOpacity,
  Text,
  StyleSheet,
  Platform,
  Image,
  KeyboardAvoidingView,
} from 'react-native';
import NetInfo from '@react-native-community/netinfo';
import {DrawerActions} from '@react-navigation/native';
import {Icon} from 'native-base';
import {ScrollView} from 'react-native-gesture-handler';
import Logo from '../assets/logo.svg';
import {useSelector} from 'react-redux';
import ImageMunition from '../assets/photo-munitions.jpg';
import FondB from '../assets/fond.jpg';

let Accueil = (props) => {
  let [orientation, setOrientation] = useState('PORTRAIT');
  let [connexion, setIsConnected] = useState(null);
  let [type, setType] = useState(null);
  let identifiant = useSelector((state) => state.identifiant);

  let cc = false;

  useEffect(() => {
    if (!cc) {
      Dimensions.addEventListener('change', ({window: {width, height}}) => {
        if (width < height) {
          setOrientation('PORTRAIT');
        } else {
          setOrientation('LANDSCAPE');
        }
      });
    }
    return () => {
      cc = true;
    };
  }, []);

  useEffect(() => {
    NetInfo.addEventListener(handleConnectivityChange);
  }, [NetInfo]);

  let handleConnectivityChange = (state) => {
    setIsConnected(state);
  };

  if (connexion) {
    setTimeout(() => {
      setIsConnected(null);
    }, 2000);
  }

  useEffect(() => {
    props.navigation.setOptions({
      headerShown: true,
      header: () => {
        return (
          <SafeAreaView
            style={[
              orientation === 'PORTRAIT'
                ? styles.headerPortrait
                : styles.headerPaysage,
            ]}>
            <View
              style={
                orientation === 'PORTRAIT'
                  ? styles.logoPortrait
                  : styles.logoPaysage
              }>
              <Logo
                height={orientation === 'PORTRAIT' ? 150 : 100}
                width={orientation === 'PORTRAIT' ? 150 : 150}
              />
            </View>
            <View
              style={
                orientation === 'PORTRAIT'
                  ? styles.MenuPortrait
                  : styles.MenuPaysage
              }>
              <TouchableOpacity
                style={
                  orientation === 'PORTRAIT'
                    ? styles.IconPortrait
                    : styles.IconPaysage
                }
                onPress={() =>
                  props.navigation.dispatch(DrawerActions.toggleDrawer())
                }>
                <Icon
                  name="menu"
                  type="MaterialIcons"
                  style={{color: '#C69D74', fontSize: 60}}
                />
              </TouchableOpacity>
            </View>
          </SafeAreaView>
        );
      },
    });
  }, []);

  if (type) {
    setTimeout(() => {
      setType(null);
    }, 4000);
  }

  if (connexion === 'Connexion') {
    setTimeout(() => {
      setIsConnected(null);
    }, 4000);
  }

  return (
    <KeyboardAvoidingView
      keyboardVerticalOffset={10}
      enabled={true}
      style={{
        display: 'flex',
        backgroundColor: 'white',
        flexDirection: 'column',
        justifyContent: 'center',
        flex: 1,
        zIndex: 10,
      }}>
      <View>
        <Image
          source={FondB}
          style={{
            width: Dimensions.get('screen').width,
            zIndex: 10,
            position: 'absolute',
          }}
        />
      </View>
      <ScrollView
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        style={{zIndex: 100}}
        contentContainerStyle={{
          alignContent: 'center',
          alignItems: 'center',
        }}>
        <Image
          source={ImageMunition}
          style={[
            orientation === 'PORTRAIT'
              ? styles.ImagePortrait
              : styles.ImagePaysage,
            {zIndex: 10, position: 'absolute'},
          ]}
        />
        <View
          style={{
            width: Dimensions.get('screen').width,
            justifyContent: 'center',
            alignContent: 'center',
            flex: 1,
            zIndex: 100,
          }}>
          <View
            style={
              orientation === 'PORTRAIT'
                ? styles.BodyPortrait
                : styles.BodyPaysage
            }>
            <View
              style={
                orientation === 'PORTRAIT'
                  ? styles.ParaPortrait
                  : styles.ParaPaysage
              }>
              <Text
                style={{
                  textAlign: 'center',
                  fontSize: 15,
                  color: 'white',
                  fontFamily: 'OpenSans-SemiBold',
                  zIndex: 100,
                }}>
                Bienvenue sur l'application SIDAM qui vous permet de bénéficier
                d'une
              </Text>
              <View
                style={{
                  width: Dimensions.get('screen').width / 1.7,
                  marginTop: 10,
                }}>
                <Text
                  style={{
                    fontSize: 33,
                    fontFamily: 'OpenSans-ExtraBold',
                    textAlign: 'center',
                    textTransform: 'uppercase',
                    color: 'white',
                    zIndex: 100,
                  }}>
                  extension
                </Text>
              </View>
              <View style={{margin: 0, padding: 0}}>
                <Text
                  style={{
                    fontSize: 33,
                    fontFamily: 'OpenSans-ExtraBold',
                    textAlign: 'center',
                    textTransform: 'uppercase',
                    color: 'white',
                    zIndex: 100,
                  }}>
                  de garantie
                </Text>
              </View>

              <View style={{margin: 0, padding: 0}}>
                <Text
                  style={{
                    fontSize: 33,
                    fontFamily: 'OpenSans-ExtraBold',
                    textAlign: 'center',
                    textTransform: 'uppercase',
                    color: 'white',
                    zIndex: 100,
                  }}>
                  de votre arme
                </Text>
              </View>
            </View>
          </View>
        </View>
        <View
          style={
            orientation === 'PORTRAIT'
              ? styles.Para2Portrait
              : styles.Para2Paysage
          }>
          <View
            style={{
              zIndex: 100,
              justifyContent: 'center',
              alignContent: 'center',
              display: 'flex',
              alignItems: 'center',
              width: Dimensions.get('screen').width,
            }}>
            {connexion &&
              connexion.isConnected &&
              connexion.type === 'cellular' && (
                <Text
                  style={{
                    color: 'red',
                    fontSize: 16,
                    fontFamily: 'Poppins-Regular',
                    textAlign: 'center',
                    justifyContent: 'center',
                    alignContent: 'center',
                    alignItems: 'center',
                  }}>
                  Vous êtes maintenant connecté
                </Text>
              )}
            {connexion &&
              connexion.isWifiEnabled &&
              connexion.type !== 'cellular' && (
                <Text
                  style={{
                    color: 'red',
                    fontSize: 16,
                    fontFamily: 'Poppins-Regular',
                    textAlign: 'center',
                    justifyContent: 'center',
                    alignContent: 'center',
                    alignItems: 'center',
                  }}>
                  Vous êtes maintenant connecté en Wifi
                </Text>
              )}
            {connexion && !connexion.isConnected && !connexion.isWifiEnabled && (
              <Text
                style={{
                  color: 'red',
                  fontSize: 16,
                  fontFamily: 'Poppins-Regular',
                  position: 'absolute',
                  textAlign: 'center',
                }}>
                Vous n'êtes pas connecté
              </Text>
            )}
          </View>
          <Text
            style={{
              color: '#636A28',
              textAlign: 'center',
              fontSize: 27,
              fontFamily: 'OpenSans-ExtraBold',
              marginTop:
                Platform.OS === 'android'
                  ? Dimensions.get('window').height > 700
                    ? 0
                    : 10
                  : 0,
            }}>
            ACCÉDER À VOTRE RÂTELIER VIRTUEL
          </Text>
          <TouchableOpacity
            style={
              orientation === 'PORTRAIT'
                ? styles.ButtonPortrait
                : styles.ButtonPaysage
            }
            onPress={() => props.navigation.navigate('Connexion')}>
            <Text
              style={{
                color: 'white',
                fontSize: 17,
                textTransform: 'uppercase',
                fontFamily: 'OpenSans-SemiBold',
              }}>
              Se connecter
            </Text>
          </TouchableOpacity>
        </View>
        {!identifiant && (
          <View style={{marginTop: 15}}>
            <TouchableOpacity
              style={
                orientation === 'PORTRAIT'
                  ? styles.ButtonPortraitB
                  : styles.ButtonPaysageB
              }
              onPress={() => props.navigation.navigate('Inscription')}>
              <Text
                style={{
                  textAlign: 'center',
                  color: 'white',
                  fontSize: 17,
                  textTransform: 'uppercase',
                  fontFamily: 'OpenSans-SemiBold',
                }}>
                Créer un compte
              </Text>
            </TouchableOpacity>
          </View>
        )}
        <View style={{marginTop: 15}}>
          <TouchableOpacity
            style={
              orientation === 'PORTRAIT'
                ? styles.ButtonBisPortrait
                : styles.ButtonBisPaysage
            }
            onPress={() => props.navigation.navigate('Reglement')}>
            <Text style={{textAlign: 'center', color: 'black'}}>Réglement</Text>
          </TouchableOpacity>
        </View>
        <View style={{marginTop: 20}}></View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

let styles = StyleSheet.create({
  logoPortrait: {
    ...Platform.select({
      ios: {
        marginLeft: 15,
        alignContent: 'center',
        justifyContent: 'center',
      },
      android: {marginLeft: 15},
    }),
  },
  logoPaysage: {
    ...Platform.select({
      ios: {
        margin: 0,
        padding: 0,
        alignContent: 'center',
        justifyContent: 'center',
      },
      android: null,
    }),
  },
  headerPortrait: {
    width: Dimensions.get('screen').width,
    display: 'flex',
    backgroundColor: 'white',
    flexDirection: 'row',
    borderBottomColor: 'black',
    alignContent: 'center',
    borderBottomWidth: 1,
    alignItems: 'center',
    zIndex: 5000,
    ...Platform.select({
      android: {
        height: Dimensions.get('screen').height / 7,
      },
      ios: {
        height: Dimensions.get('screen').height / 6,
      },
    }),
  },
  headerPaysage: {
    width: Dimensions.get('screen').width,
    display: 'flex',
    flexDirection: 'row',
    alignContent: 'center',
    alignItems: 'center',
    borderBottomColor: 'black',
    borderBottomWidth: 1,
    backgroundColor: 'white',
    zIndex: 100,

    ...Platform.select({
      android: {
        width: Dimensions.get('screen').width,
        height: Dimensions.get('screen').height / 7,
      },
      ios: {
        width: Dimensions.get('screen').width,
        height: Dimensions.get('screen').height / 4,
      },
    }),
  },
  MenuPortrait: {
    zIndex: 100,
    position: 'absolute',
    width: Dimensions.get('screen').width,
    paddingBottom: 10,
    alignSelf: 'center',
    ...Platform.select({
      ios: {},
      android: {},
    }),
  },
  MenuPaysage: {
    zIndex: 100,
    position: 'absolute',
    width: Dimensions.get('screen').width,
    alignSelf: 'center',
    ...Platform.select({
      ios: {
        paddingBottom: 30,
      },
      android: {
        paddingBottom: 30,
      },
    }),
  },
  IconPaysage: {
    zIndex: 100,
    alignItems: 'flex-end',
    marginTop: 35,
    ...Platform.select({
      android: null,
      ios: null,
    }),
  },
  IconPortrait: {
    zIndex: 100,
    alignItems: 'flex-end',
    marginRight: 10,
    ...Platform.select({
      android: {
        marginTop: 15,
      },
      ios: {
        marginTop: 50,
      },
    }),
  },
  ButtonPortrait: {
    backgroundColor: '#636A28',
    width: Dimensions.get('screen').width / 2,
    height: 40,
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center',
    marginTop: 30,
    ...Platform.select({
      android: null,
      ios: null,
    }),
  },
  ButtonPaysage: {
    backgroundColor: '#636A28',
    width: Dimensions.get('screen').width / 3,
    height: 40,
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center',
    marginTop: 30,
    ...Platform.select({
      android: null,
      ios: null,
    }),
  },
  ButtonBisPortrait: {
    width: Dimensions.get('screen').width / 2,
    height: 40,
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center',
    marginTop: 0,
    ...Platform.select({
      android: null,
      ios: null,
    }),
  },
});

export default Accueil;

谢谢

标签： reactjsreact-nativetypeerrorreadonly