android - native 模块 RNC_AsyncSQLiteDBStorage 试图覆盖 AsyncStorageModule

Question

java.lang.IllegalStateException: Native module RNC_AsyncSQLiteDBStorage tried to override AsyncStorageModule. Check the getPackages() method in MainApplication.java, it might be that module is being created twice. If this was your intention, set canOverrideExistingModule=true. This error may also be present if the package is present only once in getPackages() but is also automatically added later during build time by autolinking. Try removing the existing entry and rebuild.

MainApplication.java

@Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
      // packages.add(new MyReactNativePackage());
      return packages;
    }

Register/index.js

import React, {useState} from 'react';
import {StyleSheet, View, ScrollView} from 'react-native';
import {Button, Gap, Header, Input, Loading} from '../../components';
 import {colors, storeData, useForm} from '../../utils';
import {Fire} from '../../config';
import {showMessage} from 'react-native-flash-message';

const Register = ({navigation}) => {
 const [form, setForm] = useForm({
fullName: '',
profession: '',
email: '',
password: '',
  });
    const [loading, setLoading] = useState(false);

   const onContinue = () => {
     console.log(form);
     const data = {
    fullName: form.fullName,
    profession: form.profession,
     email: form.email,
    };
     navigation.navigate('UploadPhoto', data);

// setLoading(true);
// Fire.auth()
//   .createUserWithEmailAndPassword(form.email, form.password)
//   .then((success) => {
//     setLoading(false);
//     setForm('reset');

//     const data = {
//       fullName: form.fullName,
//       profession: form.profession,
//       email: form.email,
//     };

//     Fire.database()
//       .ref('users/' + success.user.uid + '/')
//       .set(data);
//     storeData('user', data);
//     navigation.navigate('UploadPhoto', data);

//     console.log('register success:', success);
//   })
//   .catch((error) => {
//     const errorMessage = error.message;
//     setLoading(false);
//     showMessage({
//       message: errorMessage,
//       type: 'default',
//       backgroundColor: colors.error,
//       color: colors.white,
//     });
//     console.log('error:', error);
//   });
          };

  return (
   <>
  <View style={styles.page}>
    <Header onPress={() => navigation.goBack()} title="Daftar Akun" />
    <View style={styles.content}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <Input
          label="Full Name"
          value={form.fullName}
          onChangeText={(value) => setForm('fullName', value)}
        />
        <Gap height={24} />
        <Input
          label="Pekerjaan"
          value={form.profession}
          onChangeText={(value) => setForm('profession', value)}
        />
        <Gap height={24} />
        <Input
          label="Email"
          value={form.email}
          onChangeText={(value) => setForm('email', value)}
        />
        <Gap height={24} />
        <Input
          label="Password"
          value={form.password}
          onChangeText={(value) => setForm('password', value)}
          secureTextEntry
        />
        <Gap height={40} />
        <Button title="Continue" onPress={onContinue} />
      </ScrollView>
    </View>
  </View>
  {loading && <Loading />}
</>
    );
 };

 export default Register;

   const styles = StyleSheet.create({
   page: {backgroundColor: colors.white, flex: 1},
    content: {padding: 40, paddingTop: 0},
   });

UploadPhoto/index.js

  import React, {useState} from 'react';
import {StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native';
import {IconAddPhoto, ILNullPhoto, IconRemovePhoto} from '../../assets';
import {Header, Link, Button, Gap} from '../../components';
import {colors, fonts} from '../../utils';
import {launchImageLibrary} from 'react-native-image-picker';
import {showMessage} from 'react-native-flash-message';

export default function index({navigation, route}) {
const {fullName, profession, email} = route.params;
console.log('fullName:', fullName)
console.log('profession:', profession)
console.log('email:', email)

const [hasPhoto, setHasPhoto] = useState(false);
const [photo, setPhoto] = useState(ILNullPhoto);
const getImage = () => {
launchImageLibrary({}, (response) => {
  console.log('response:', response);
  if (response.didCancel || response.error) {
    showMessage({
      message: 'oops, sepertinya anda tidak memilih fotonya?',
      type: 'default',
      backgroundColor: colors.error,
      color: colors.white,
    });
  } else {
    const source = {uri: response.uri};
    setPhoto(source);
    setHasPhoto(true);
    }
  });
 };

return (
<View style={styles.page}>
  <Header title="Upload Photo" />
  <View style={styles.content}>
    <View style={styles.profile}>
      <TouchableOpacity style={styles.avatarWrapper} onPress={getImage}>
        <Image source={photo} style={styles.avatar} />
        {hasPhoto && <IconRemovePhoto style={styles.addPhoto} />}
        {!hasPhoto && <IconAddPhoto style={styles.addPhoto} />}
      </TouchableOpacity>
      <Text style={styles.name}>Ferdiansyah</Text>
      <Text style={styles.profession}>Programmer</Text>
    </View>
    <View>
      <Button
        disable={!hasPhoto}
        title="Upload and Continue"
        onPress={() => navigation.replace('MainApp')}
      />
      <Gap height={30} />
      <Link
        title="Skip for this"
        align="center"
        size={16}
        onPress={() => navigation.replace('MainApp')}
      />
    </View>
  </View>
</View>
);
}

 const styles = StyleSheet.create({
  page: {flex: 1, backgroundColor: colors.white},
  content: {
paddingHorizontal: 40,
paddingBottom: 64,
flex: 1,
justifyContent: 'space-between',
},
 profile: {
alignItems: 'center',
flex: 1,
justifyContent: 'center',
 },
 avatar: {width: 110, height: 110, borderRadius: 110 / 2},
 avatarWrapper: {
width: 130,
height: 130,
borderWidth: 1,
borderColor: colors.border,
borderRadius: 130 / 2,
alignItems: 'center',
justifyContent: 'center',
 },
    addPhoto: {position: 'absolute', bottom: 8, right: 6},
  name: {
fontSize: 24,
color: colors.text.primary,
fontFamily: fonts.primary[600],
textAlign: 'center',
 },
 profession: {
fontSize: 18,
fontFamily: fonts.primary.normal,
textAlign: 'center',
color: colors.text.secondary,
marginTop: 4,
 },
 });

Answer 1

这里有同样的问题。
我弹出的 Expo 应用程序在 iOS 上运行良好，但在 Android 上出现错误。
我通过从我的 package.json 中删除一个“重复的”AsyncStorage 包来修复它，出于某种原因，我拥有社区包以及 ReactNative.dev 推荐的包
删除社区包后，清理 node_modules 并毫无问题地构建所有内容。