屏幕上显示react本地空白间隔时出错

我正在用react native做一个应用程序。在做这个应用程序的时候，我用了很多'react-native-blank-spacer'库。
但我有个问题。
本来空白间隔工作正常，但这次我得到一个错误。
这是错误消息。
错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。
检查SettingLockScreen的渲染方法。
我试图解决这个问题，但找不到办法。
这是我的代码。
import React, {useState, useEffect} from 'react';
import {Text, View, StyleSheet, FlatList, TouchableOpacity, Switch, Alert} from 'react-native';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {BlankSpacer} from 'react-native-blank-spacer';
import {Platform} from 'react-native';

var passwordone = 10;
var passwordtwo = 10;
var passwordthree = 10;
var passwordfour = 10;

function SettingLockScreen() {
   const [isEnabled, setIsEnabled] = useState(false);
   const [passwardscreenshow, passwardscreenShow] = useState(false);
   const [passwardcircleone, passwardcircleOne] = useState(false);
   const [passwardcircletwo, passwardcircleTwo] = useState(false);
   const [passwardcirclethree, passwardcircleThree] = useState(false);
   const [passwardcirclefour, passwardcircleFour] = useState(false);
   const [ioscomponent, iosComponenT] = useState(false);
   const toggleSwitch = () => {
      setIsEnabled(previousState => !previousState);
      if (isEnabled == false) {
         createThreeButtonAlert();
      }else{
         savenotificationbool();
      }
   }
   const savenotificationbool2 = async (value) => {
    const hello = passwordone.toString();
    const hellohello = passwordtwo.toString();
    const hellohellohello = passwordthree.toString();
    const hellohellohellohello = passwordfour.toString();
    for (var key in hello) {
         hello2 = hello[key];
    }
    for (var key in hellohello) {
         hellohello2 = hellohello[key];
    }
    for (var key in hellohellohello) {
         hellohellohello2 = hellohellohello[key];
    }
    for (var key in hellohellohellohello) {
         hellohellohellohello2 = hellohellohellohello[key];
    }
    var hello2 = passwordone.toString();
    var hellohello2 = passwordtwo.toString();
    var hellohellohello2 = passwordthree.toString();
    var hellohellohellohello2 = passwordfour.toString();
    try {
      await AsyncStorage.setItem("passwordone", hello2);
      await AsyncStorage.setItem("passwordtwo", hellohello2);
      await AsyncStorage.setItem("passwordthree", hellohellohello2);
      await AsyncStorage.setItem("passwordfour", hellohellohellohello2);
    } catch (error) {
      console.error(error);
    }
    passwardscreenShow(false);
  };
   const savenotificationbool = async (value) => {
    try {
      await AsyncStorage.setItem("lockbool", "true");
    } catch (error) {
      console.error(error);
    }
  };
  const savenotificationbooltrue = async (value) => {
     try {
        await AsyncStorage.setItem("lockbool", "false");
     } catch(error) {
        console.log(error);
     }
  }
  const savelocklockpassward = async(value) => {
     try {
        await AsyncStorage.setItem("locklock", "passward");
     } catch(error) {
        console.log(error);
     }
  }
  const savelocklocktouchidandfaceid = async(value) => {
     try {
        await AsyncStorage.setItem("locklock", "touchidandfaceid");
     } catch(error) {
        console.log(error);
     }
  }
   const createThreeButtonAlert = () =>
    Alert.alert('select', 'select please', [
      {
        text: 'password',
        onPress: () => {
           savenotificationbooltrue();
           savelocklockpassward();
           passwardscreenShow(true);
        },
      },
      {
        text: 'cancel',
        onPress: () => setIsEnabled(previousState => !previousState),
        style: 'cancel',
      },
      {text: 'touch id or face id', onPress: () => {
         savenotificationbooltrue();
         savelocklocktouchidandfaceid();
      }},
    ]);
    const readnotificationbool = async (value) => {
    try {
          const hello = await AsyncStorage.getItem("lockbool");
          if (hello == "false") {
             setIsEnabled(true);
          }
       } catch (error) {
         console.error(error);
       }
    };

    useEffect(() => {
       readnotificationbool();
        if (Platform.OS == 'ios') {
          iosComponenT(true);
       }
    }, [])

   return (
      <SafeAreaProvider>
         {!passwardscreenshow ? (
         <View style={styles.hello}>
         <View style={{flexDirection: 'row'}}>
            <FlatList
        data={[
          {key: "lock"},
        ]}
        renderItem={({item}) => <TouchableOpacity>
            <Text style={styles.item}>{item.key}</Text>
        </TouchableOpacity>}
      />
      <Switch
         trackColor={{false: '#767577', true: '#81b0ff'}}
         thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
         ios_backgroundColor="#3e3e3e"
         onValueChange={toggleSwitch}
         value={isEnabled}
      />
            </View>
         </View>
         ) : null}
         {passwardscreenshow ? (
            <View style={styles.hello}>
               <Text style={styles.newpasswardtitle}>password</Text>
               <Text style={styles.newpasswardsubtitle}></Text>
               <View style={{flexDirection: 'row'}}>
                  {!ioscomponent ? (
                    <View>{!passwardcircleone ? (
                     <View style={styles.circle}></View>
                  ) : null}
                  {!passwardcircletwo ? (
                     <View style={styles.circle}></View>
                  ) : null}
                  {!passwardcirclethree ? (
                     <View style={styles.circle}></View>
                    ) : null}
                    {!passwardcirclefour ? (
                     <View style={styles.circle}></View>
                    ) : null}</View>
                  ) : null}
                  {ioscomponent ? (
                    <View style={{flexDirection: 'row'}}>
                    {!passwardcircleone ? (
                     <View style={styles.circle}></View>
                  ) : null}
                  {passwardcircleone ? (
                     <View style={styles.circletwo}></View>
                  ) : null}
                  {!passwardcircletwo ? (
                     <View style={styles.circle}></View>
                  ) : null}
                  {passwardcircletwo ? (
                     <View style={styles.circletwo}></View>
                  ) : null}
                  {!passwardcirclethree ? (
                     <View style={styles.circle}></View>
                    ) : null}
                    {passwardcirclethree ? (
                     <View style={styles.circletwo}></View>
                    ) : null}
                    {!passwardcirclefour ? (
                     <View style={styles.circle}></View>
                    ) : null}
                    {passwardcirclefour ? (
                     <View style={styles.circletwo}></View>
                    ) : null}</View>
                  ) : null}
               </View>
               <BlankSpacer width={16} />
               <View style={{flexDirection: 'row'}}>
                  <TouchableOpacity onPress={() => {
                   
                  }}><Text style={styles.numberbuttonstyle}>1</Text></TouchableOpacity>
                  <BlankSpacer width={16} />
                  <TouchableOpacity onPress={() => {
                     
                  }}><Text style={styles.numberbuttonstyle}>2</Text></TouchableOpacity>
                  <BlankSpacer width={16} />
                  <TouchableOpacity onPress={() => {
                     
                  }}><Text style={styles.numberbuttonstyle}>3</Text></TouchableOpacity>
               </View>
               <BlankSpacer width={16} />
               <View style={{flexDirection: 'row'}}>
                  <TouchableOpacity onPress={() => {
                     
                  }}><Text style={styles.numberbuttonstyle}>4</Text></TouchableOpacity>
                  <BlankSpacer width={16} />
                  <TouchableOpacity onPress={() => {
                     
                  }}><Text style={styles.numberbuttonstyle}>6</Text></TouchableOpacity>
               </View>
               <BlankSpacer width={16} />
               <View style={{flexDirection: 'row'}}>
                  <TouchableOpacity onPress={() => {
                     
                  }}><Text style={styles.numberbuttonstyle}>7</Text></TouchableOpacity>
                  <BlankSpacer width={16} />
                  <TouchableOpacity onPress={() => {
                     
                  }}><Text style={styles.numberbuttonstyle}>8</Text></TouchableOpacity>
                  <BlankSpacer width={16} />
                  <TouchableOpacity onPress={() => {
                     
                  }}><Text style={styles.numberbuttonstyle}>9</Text></TouchableOpacity>
               </View>
               <BlankSpacer width={16} />
               <View style={{flexDirection: 'row'}}>
                  <TouchableOpacity onPress={() => {
                     
                  }}><Text style={styles.numberbuttonstyle}>0</Text></TouchableOpacity>
                  <TouchableOpacity onPress={() => {
                     
                  }}><Text style={styles.numberbuttonstyle}>Delete</Text></TouchableOpacity>
               </View>
            </View>
         ) : null}
      </SafeAreaProvider>
   );
}

const styles = StyleSheet.create({
   hello: {
       flex: 1,
       //justifyContent: "center"
       alignItems: "center",
       flexDirection: "column",
   },
   item: {
      padding: 10,
      fontSize: 18,
      height: 44,
    },
   newpasswardtitle: {
      padding: 10,
      fontSize: 30,
      height: 44,
      fontWeight: "bold",
   },
   newpasswardsubtitle: {
      padding: 10,
      fontSize: 20,
      height: 44,
   },
   circle: {
      width: 50,
      height: 50,
      borderRadius: 100 / 2,
      backgroundColor: "lightgray",
   },
   circletwo: {
      width: 50,
      height: 50,
      borderRadius: 100 / 2,
      backgroundColor: "gray",
   },
   numberbuttonstyle: {
      padding: 25,
      fontSize: 40,
   },
});
export default SettingLockScreen;
仅供参考，当passwordscreenshow变为true时，此问题会立即出现。
如果有人能帮助我，请帮助我。
屏幕上显示react本地空白间隔时出错

1条答案

相关问题

热门标签

最新问答
