Question

使用react-native元素时出现此错误。

开发服务器返回的响应错误代码：500

身体：

{"type":"TransformError","lineNumber":3,"column":7,"filename":"src\\components\\Login.js","errors":[{"description":"SyntaxError: D:\\practice\\ReactNative\\AwesomeProject\\node_modules\\react-native\\scripts\\src\\components\\Login.js: Identifier 'React' has already been declared (3:7)\n\n\u001b[0m \u001b[90m 1 | \u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 2 | \u001b[39m\u001b[36mimport\u001b[39m \u001b[33mReact\u001b[39m from \u001b[32m'react'\u001b[39m\u001b[33m;\u001b[39m \u001b[0m\n\u001b[0m\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 3 | \u001b[39m\u001b[36mimport\u001b[39m \u001b[33mReact\u001b[39m\u001b[33m,\u001b[39m {\u001b[33mComponent\u001b[39m} from \u001b[32m'react'\u001b[39m\u001b[33m;\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m   | \u001b[39m       \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 4 | \u001b[39m\u001b[36mimport\u001b[39m {\u001b[33mStyleSheet\u001b[39m\u001b[33m,\u001b[39m\u001b[33mView\u001b[39m\u001b[33m,\u001b[39m\u001b[33mButton\u001b[39m} from \u001b[32m'react-native'\u001b[39m\u001b[33m;\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 5 | \u001b[39m\u001b[36mimport\u001b[39m { \u001b[33mFormLabel\u001b[39m\u001b[33m,\u001b[39m \u001b[33mFormInput\u001b[39m\u001b[33m,\u001b[39m \u001b[33mFormValidationMessage\u001b[39m } from \u001b[32m'react-native-elements'\u001b[39m\u001b[33m;\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 6 | \u001b[39m\u001b[0m","filename":"src\\components\\Login.js","lineNumber":3}],"name":"SyntaxError","message":"SyntaxError: D:\\practice\\ReactNative\\AwesomeProject\\node_modules\\react-native\\scripts\\src\\components\\Login.js: Identifier 'React' has already been declared (3:7)\n\n\u001b[0m \u001b[90m 1 | \u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 2 | \u001b[39m\u001b[36mimport\u001b[39m \u001b[33mReact\u001b[39m from \u001b[32m'react'\u001b[39m\u001b[33m;\u001b[39m \u001b[0m\n\u001b[0m\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 3 | \u001b[39m\u001b[36mimport\u001b[39m \u001b[33mReact\u001b[39m\u001b[33m,\u001b[39m {\u001b[33mComponent\u001b[39m} from \u001b[32m'react'\u001b[39m\u001b[33m;\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m   | \u001b[39m       \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 4 | \u001b[39m\u001b[36mimport\u001b[39m {\u001b[33mStyleSheet\u001b[39m\u001b[33m,\u001b[39m\u001b[33mView\u001b[39m\u001b[33m,\u001b[39m\u001b[33mButton\u001b[39m} from \u001b[32m'react-native'\u001b[39m\u001b[33m;\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 5 | \u001b[39m\u001b[36mimport\u001b[39m { \u001b[33mFormLabel\u001b[39m\u001b[33m,\u001b[39m \u001b[33mFormInput\u001b[39m\u001b[33m,\u001b[39m \u001b[33mFormValidationMessage\u001b[39m } from \u001b[32m'react-native-elements'\u001b[39m\u001b[33m;\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 6 | \u001b[39m\u001b[0m","stack":"SyntaxError: D:\\practice\\ReactNative\\AwesomeProject\\node_modules\\react-native\\scripts\\src\\components\\Login.js: Identifier 'React' has already been declared (3:7)\n\n\u001b[0m \u001b[90m 1 | \u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 2 | \u001b[39m\u001b[36mimport\u001b[39m \u001b[33mReact\u001b[39m from \u001b[32m'react'\u001b[39m\u001b[33m;\u001b[39m \u001b[0m\n\u001b[0m\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 3 | \u001b[39m\u001b[36mimport\u001b[39m \u001b[33mReact\u001b[39m\u001b[33m,\u001b[39m {\u001b[33mComponent\u001b[39m} from \u001b[32m'react'\u001b[39m\u001b[33m;\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m   | \u001b[39m       \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 4 | \u001b[39m\u001b[36mimport\u001b[39m {\u001b[33mStyleSheet\u001b[39m\u001b[33m,\u001b[39m\u001b[33mView\u001b[39m\u001b[33m,\u001b[39m\u001b[33mButton\u001b[39m} from \u001b[32m'react-native'\u001b[39m\u001b[33m;\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 5 | \u001b[39m\u001b[36mimport\u001b[39m { \u001b[33mFormLabel\u001b[39m\u001b[33m,\u001b[39m \u001b[33mFormInput\u001b[39m\u001b[33m,\u001b[39m \u001b[33mFormValidationMessage\u001b[39m } from \u001b[32m'react-native-elements'\u001b[39m\u001b[33m;\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 6 | \u001b[39m\u001b[0m\n    at Object.raise (D:\\practice\\ReactNative\\AwesomeProject\\node_modules\\@babel\\parser\\lib\\index.js:6344:17)\n    at ScopeHandler.checkRedeclarationInScope (D:\\practice\\ReactNative\\AwesomeProject\\node_modules\\@babel\\parser\\lib\\index.js:3757:12)\n    at ScopeHandler.declareName (D:\\practice\\ReactNative\\AwesomeProject\\node_modules\\@babel\\parser\\lib\\index.js:3723:12)\n    at Object.checkLVal (D:\\practice\\ReactNative\\AwesomeProject\\node_modules\\@babel\\parser\\lib\\index.js:8034:22)\n    at Object.checkLVal (D:\\practice\\ReactNative\\AwesomeProject\\node_modules\\@babel\\parser\\lib\\index.js:2344:20)\n    at Object.parseImportSpecifierLocal (D:\\practice\\ReactNative\\AwesomeProject\\node_modules\\@babel\\parser\\lib\\index.js:2494:10)\n    at Object.maybeParseDefaultImportSpecifier (D:\\practice\\ReactNative\\AwesomeProject\\node_modules\\@babel\\parser\\lib\\index.js:11156:12)\n    at Object.maybeParseDefaultImportSpecifier (D:\\practice\\ReactNative\\AwesomeProject\\node_modules\\@babel\\parser\\lib\\index.js:2521:18)\n    at Object.parseImport (D:\\practice\\ReactNative\\AwesomeProject\\node_modules\\@babel\\parser\\lib\\index.js:11127:31)\n    at Object.parseStatementContent (D:\\practice\\ReactNative\\AwesomeProject\\node_modules\\@babel\\parser\\lib\\index.js:9886:27)"}
processBundleResult
    BundleDownloader.java:296
access$200
    BundleDownloader.java:37
onResponse
    BundleDownloader.java:174
execute
    RealCall.java:206
run
    NamedRunnable.java:32
runWorker
    ThreadPoolExecutor.java:1133
run
    ThreadPoolExecutor.java:607
run
    Thread.java:761

我正在Windows机器中尝试Android

import React, {Component} from 'react';
import {StyleSheet,View,Button} from 'react-native';
import { FormLabel, FormInput, FormValidationMessage } from 'react-native-elements';

class Login extends Component{
    render() {
        return (
             <View style={styles.View}>
                 <FormLabel>Name</FormLabel>
                <FormInput/>
                <FormValidationMessage>Error message</FormValidationMessage>
                <Button>

                </Button>
             </View>
        );
    }
}

Answer 1

仅从FormLabel导入react-native，而不是react-native-elements。

import {StyleSheet,View,Button,FormLabel} from 'react-native';
import {FormInput, FormValidationMessage } from 'react-native-elements';

构建项目时出现此错误

1 个答案: