本机模块 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 并顺利构建所有内容。

Answer 2

我通过运行这个

修复了它

npm i @react-native-async-storage/async-storage

Answer 3

"@react-native-async-storage/async-storage": "^1.13.2",
"@react-native-community/async-storage": "~1.12.0",

在 package.json 中，我删除了社区，重新构建了项目，然后就可以了。

Answer 4

要解决本机模块 rnc_asyncsqlitedbstorage 试图覆盖 asyncstorage 模块，你应该这样做：

npm install react-scripts --save
npm install -g react-native-cli
npm i @react-native-async-storage/async-storage
npm i @react-native-community/async-storage
npm rebuild
从package.json删除社区异步行（您的版本可能不同）

"@react-native-community/async-storage": "^1.12.1",

PS：如果再次出现红屏则npm rebuild然后重新出现运行.

本机模块 RNC_AsyncSQLiteDBStorage 试图覆盖 AsyncStorageModule

Native module RNC_AsyncSQLiteDBStorage tried to override AsyncStorageModule

storage

android

asynchronous

reactjs

react-native