在屏幕上显示react native blank spacer时出错

Question

我正在用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时，此问题立即出现。

如果有人能帮助我，请帮助我。

Answer 1

您的导入错误。根据docs https://www.npmjs.com/package/react-native-blank-spacer#usage，它应该是这样的

import BlankSpacer from "react-native-blank-spacer";

由于此BlankSpacer未定义，因此出现错误。