在OnboardingScreens上找不到id 'kotlin-android‘的插件

Question

我是新的反应本机，并试图创建一个在线屏幕的应用程序。在添加了输入屏幕的代码并将其导入App.js文件之后。我试着运行这个应用程序。

然而，应用程序未能在我的模拟器上安装。

错误：

• 出了问题:出现了一个评估项目‘：反应-本地导航’的问题。

没有找到id 'kotlin-android‘的插件。

• ​

尝试:使用--stacktrace选项运行以获得堆栈跟踪。使用--info或-调试选项运行以获得更多日志输出。用扫描来获得完整的洞察力。

2:任务失败，只有一个例外。

• 哪里出了问题:配置项目时出现了一个问题:反应-本机导航‘。

未指定compileSdkVersion。请把它添加到build.gradle

我的build.gradle文件如下所示：

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "29.0.2"
        minSdkVersion = 16
        compileSdkVersion = 29
        targetSdkVersion = 29
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath('com.android.tools.build:gradle:4.1.1')
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }

        google()
        jcenter()
        maven { url 'https://www.jitpack.io' }
    }
}

这是我的App.js文件

import React, { Component } from 'react';
import SplashScreen from 'react-native-splash-screen';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';



//import Screens
import onboardingScreen from './screens/onboardingScreen';

import {
  Platform,
  StyleSheet,
  Text,
  View,
  StatusBar
} from 'react-native';

const AppStack = createStackNavigator();

export default class App extends Component {

  componentDidMount() {
    SplashScreen.hide()
  }
  render() {
    return (
      <NavigationContainer>
        <AppStack.Navigator
          headermode="none">

          <AppStack.Screen name="onboardingScreen" Component={onboardingScreen} />



        </AppStack.Navigator>
      </NavigationContainer>
    );
  }
}

package.json：

{
  "name": "Reactnative",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-app-intro-slider": "^4.0.4",
    "react-native-navigation": "^7.6.0",
    "react-native-onboarding-swiper": "^1.1.4",
    "react-native-splash-screen": "^3.2.0",
    "react-navigation-stack": "^2.10.2"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^25.1.0",
    "eslint": "^6.5.1",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

onboardingScreen.js：

import React from 'react';
import { view, Button, Text, Image, StyleSheet} from 'react-native';

import Onboarding from 'react-native-onboarding-swiper';


const Dots = ({selected}) => {
    let backgroundColor;

    backgroundColor = selected ? 'rgba(0, 0, 0, 0.8)' : 'rgba(0, 0, 0, 0.3)';

    return (
        <View 
            style={{
                width:6,
                height: 6,
                marginHorizontal: 3,
                backgroundColor
            }}
        />
    );
}

const Skip = ({...props}) => (
    <TouchableOpacity
        style={{marginHorizontal:10}}
        {...props}
    >
        <Text style={{fontSize:16}}>Skip</Text>
    </TouchableOpacity>
);

const Next = ({...props}) => (
    <TouchableOpacity
        style={{marginHorizontal:10}}
        {...props}
    >
        <Text style={{fontSize:16}}>Next</Text>
    </TouchableOpacity>
);

const Done = ({...props}) => (
    <TouchableOpacity
        style={{marginHorizontal:10}}
        {...props}
    >
        <Text style={{fontSize:16}}>Done</Text>
    </TouchableOpacity>
);



<Onboarding
   SkipButtonComponent={Skip}
        NextButtonComponent={Next}
        DoneButtonComponent={Done}
        DotComponent={Dots}
        onSkip={() => navigation.replace("Login")}
        onDone={() => navigation.navigate("Login")}
  pages={[
    {
      backgroundColor: '#fff',
      image: <Image source={require('../assets/img/slider1.png')} />,
      title: 'Enabling Collaboration',
      subtitle: 'We connect local shoppers to online buyers',
    },
      {
      backgroundColor: '#fff',
      image: <Image source={require('../assets/img/slider2.png')} />,
      title: 'Peer Up',
      subtitle: 'Going home? Ready to help? Drop Orders Get Compensated',
    },
      {
      backgroundColor: '#fff',
      image: <Image source={require('../assets/img/slider3.png')} />,
      title: 'Enabling Collaboration',
      subtitle: 'Busy at home? Need groceries quickly? Want low service fees 0% Mark-up as well? Just make a list',
    },
  ]}
/>

export default onboardingScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center'
  },
});

我也试过搜索这个错误，但是找不到任何与反应相关的东西--本地登录--刷卡。

Answer 1

我以为是另一个图书馆产生了这个错误。尝尝这个

android/build.gradle

buildscript {
ext {
    minSdkVersion = 21 
    // kotlinVersion = "1.3.72" 
    kotlinVersion = "1.6.0"
}

dependencies {
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion" // add this line 
}
}

Answer 2

您的应用程序，js导入包-导航

https://reactnavigation.org/

但是，您的错误显示包resct本机导航。

https://github.com/wix/react-native-navigation

确保您的软件包并遵循安装指南。

编辑：

根据github中的源代码

1. 你不需要反应导航堆栈包
2. 您必须添加所需的包。 根据react的文档-导航版本5.x 当使用@react-导航/堆栈时，必须确保已安装了@react-导航/本机。 https://reactnavigation.org/docs/stack-navigator/ 然后，当您使用@react-导航/堆栈时，您必须安装一些反应性本机包。 https://reactnavigation.org/docs/getting-started/#installation
3. 启动屏幕冻结，因为没有找到onboardingScreen 导入和导出文件时存在一些错误。

所以，你可以这样解决它：

第1和2号：

package.json

更改package.json，然后删除node_modules文件夹和$ npm安装

数字3：

在屏幕/onboardingScreen.js上，您必须修复导出

屏幕/onboardingScreen.js

在App.js上，您必须修复导入

App.js