React-native初学入坑指南

1. jar包下载不了,一直超时

解决办法:在android文件夹下找到build.gradle文件,在repositories里面maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }如下图:在这里插入图片描述

2. 启动项目报SDK找不到

找到自己下载的sdk目录,在android文件夹下添加local.properties文件(放的sdk所在的目录),如下图是我的SDK所在目录
在这里插入图片描述

3. JetBrains WebStorm 2019.2.4 配置RN环境遇到的问题

  1. 没有代码提示
解决办法: 添加如下图插件:

在这里插入图片描述

按箭头指示方向添加插件。

  1. 在App.js文件写内容出现红色波浪线
    解决办法:
  2. 在这里插入图片描述
  3. 在这里插入图片描述
    替换如下文件。
{
"root": true,
"parser": "babel-eslint",
"env": {
  "es6": true,
  "jest": true
},
"plugins": [
  "eslint-comments",
  "flowtype",
  "prettier",
  "react",
  "react-native",
  "jest"
],
// Map from global var to bool specifying if it can be redefined
"globals": {
  "__DEV__": true,
  "__dirname": false,
  "__fbBatchedBridgeConfig": false,
  "alert": false,
  "cancelAnimationFrame": false,
  "cancelIdleCallback": false,
  "clearImmediate": true,
  "clearInterval": false,
  "clearTimeout": false,
  "console": false,
  "document": false,
  "escape": false,
  "Event": false,
  "EventTarget": false,
  "exports": false,
  "fetch": false,
  "FormData": false,
  "global": false,
  "jest": false,
  "Map": true,
  "module": false,
  "navigator": false,
  "process": false,
  "Promise": true,
  "requestAnimationFrame": true,
  "requestIdleCallback": true,
  "require": false,
  "Set": true,
  "setImmediate": true,
  "setInterval": false,
  "setTimeout": false,
  "window": false,
  "XMLHttpRequest": false,
  "pit": false,
  "jasmine": true
},
"rules": {
  // General
  "comma-dangle": [
    1,
    "always-multiline"
  ], // allow or disallow trailing commas
  "no-cond-assign": 1, // disallow assignment in conditional expressions
  "no-console": 0, // disallow use of console (off by default in the node environment)
  "no-const-assign": 2, // disallow assignment to const-declared variables
  "no-constant-condition": 0, // disallow use of constant expressions in conditions
  "no-control-regex": 1, // disallow control characters in regular expressions
  "no-debugger": 1, // disallow use of debugger
  "no-dupe-class-members": 2, // Disallow duplicate name in class members
  "no-dupe-keys": 2, // disallow duplicate keys when creating object literals
  "no-empty": 0, // disallow empty statements
  "no-ex-assign": 1, // disallow assigning to the exception in a catch block
  "no-extra-boolean-cast": 1, // disallow double-negation boolean casts in a boolean context
  "no-extra-parens": 0, // disallow unnecessary parentheses (off by default)
  "no-extra-semi": 1, // disallow unnecessary semicolons
  "no-func-assign": 1, // disallow overwriting functions written as function declarations
  "no-inner-declarations": 0, // disallow function or variable declarations in nested blocks
  "no-invalid-regexp": 1, // disallow invalid regular expression strings in the RegExp constructor
  "no-negated-in-lhs": 1, // disallow negation of the left operand of an in expression
  "no-obj-calls": 1, // disallow the use of object properties of the global object (Math and JSON) as functions
  "no-regex-spaces": 1, // disallow multiple spaces in a regular expression literal
  "no-reserved-keys": 0, // disallow reserved words being used as object literal keys (off by default)
  "no-sparse-arrays": 1, // disallow sparse arrays
  "no-unreachable": 2, // disallow unreachable statements after a return, throw, continue, or break statement
  "use-isnan": 1, // disallow comparisons with the value NaN
  "valid-jsdoc": 0, // Ensure JSDoc comments are valid (off by default)
  "valid-typeof": 1, // Ensure that the results of typeof are compared against a valid string
  // Best Practices
  // These are rules designed to prevent you from making mistakes. They either prescribe a better way of doing something or help you avoid footguns.
  "block-scoped-var": 0, // treat var statements as if they were block scoped (off by default)
  "complexity": 0, // specify the maximum cyclomatic complexity allowed in a program (off by default)
  "consistent-return": 0, // require return statements to either always or never specify values
  "curly": 1, // specify curly brace conventions for all control statements
  "default-case": 0, // require default case in switch statements (off by default)
  "dot-notation": 1, // encourages use of dot notation whenever possible
  "eqeqeq": [
    1,
    "allow-null"
  ], // require the use of === and !==
  "guard-for-in": 0, // make sure for-in loops have an if statement (off by default)
  "no-alert": 1, // disallow the use of alert, confirm, and prompt
  "no-caller": 1, // disallow use of arguments.caller or arguments.callee
  "no-div-regex": 1, // disallow division operators explicitly at beginning of regular expression (off by default)
  "no-else-return": 0, // disallow else after a return in an if (off by default)
  "no-eq-null": 0, // disallow comparisons to null without a type-checking operator (off by default)
  "no-eval": 2, // disallow use of eval()
  "no-extend-native": 1, // disallow adding to native types
  "no-extra-bind": 1, // disallow unnecessary function binding
  "no-fallthrough": 1, // disallow fallthrough of case statements
  "no-floating-decimal": 1, // disallow the use of leading or trailing decimal points in numeric literals (off by default)
  "no-implied-eval": 1, // disallow use of eval()-like methods
  "no-labels": 1, // disallow use of labeled statements
  "no-iterator": 1, // disallow usage of __iterator__ property
  "no-lone-blocks": 1, // disallow unnecessary nested blocks
  "no-loop-func": 0, // disallow creation of functions within loops
  "no-multi-str": 0, // disallow use of multiline strings
  "no-native-reassign": 0, // disallow reassignments of native objects
  "no-new": 1, // disallow use of new operator when not part of the assignment or comparison
  "no-new-func": 2, // disallow use of new operator for Function object
  "no-new-wrappers": 1, // disallows creating new instances of String,Number, and Boolean
  "no-octal": 1, // disallow use of octal literals
  "no-octal-escape": 1, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251";
  "no-proto": 1, // disallow usage of __proto__ property
  "no-redeclare": 0, // disallow declaring the same variable more then once
  "no-return-assign": 1, // disallow use of assignment in return statement
  "no-script-url": 1, // disallow use of javascript: urls.
  "no-self-compare": 1, // disallow comparisons where both sides are exactly the same (off by default)
  "no-sequences": 1, // disallow use of comma operator
  "no-unused-expressions": 0, // disallow usage of expressions in statement position
  "no-void": 1, // disallow use of void operator (off by default)
  "no-warning-comments": 0, // disallow usage of configurable warning terms in comments": 1,                        // e.g. TODO or FIXME (off by default)
  "no-with": 1, // disallow use of the with statement
  "radix": 1, // require use of the second argument for parseInt() (off by default)
  "semi-spacing": 1, // require a space after a semi-colon
  "vars-on-top": 0, // requires to declare all vars on top of their containing scope (off by default)
  "wrap-iife": 0, // require immediate function invocation to be wrapped in parentheses (off by default)
  "yoda": 1, // require or disallow Yoda conditions
  // Variables
  // These rules have to do with variable declarations.
  "no-catch-shadow": 1, // disallow the catch clause parameter name being the same as a variable in the outer scope (off by default in the node environment)
  "no-delete-var": 1, // disallow deletion of variables
  "no-label-var": 1, // disallow labels that share a name with a variable
  "no-shadow": 1, // disallow declaration of variables already declared in the outer scope
  "no-shadow-restricted-names": 1, // disallow shadowing of names such as arguments
  "no-undef": 2, // disallow use of undeclared variables unless mentioned in a /*global */ block
  "no-undefined": 0, // disallow use of undefined variable (off by default)
  "no-undef-init": 1, // disallow use of undefined when initializing variables
  "no-unused-vars": [
    1,
    {
      "vars": "all",
      "args": "none", "ignoreRestSiblings": true
    }
  ], // disallow declaration of variables that are not used in the code
  "no-use-before-define": 0, // disallow use of variables before they are defined
  // Node.js
  // These rules are specific to JavaScript running on Node.js.
  "handle-callback-err": 1, // enforces error handling in callbacks (off by default) (on by default in the node environment)
  "no-mixed-requires": 1, // disallow mixing regular variable and require declarations (off by default) (on by default in the node environment)
  "no-new-require": 1, // disallow use of new operator with the require function (off by default) (on by default in the node environment)
  "no-path-concat": 1, // disallow string concatenation with __dirname and __filename (off by default) (on by default in the node environment)
  "no-process-exit": 0, // disallow process.exit() (on by default in the node environment)
  "no-restricted-modules": 1, // restrict usage of specified node modules (off by default)
  "no-sync": 0, // disallow use of synchronous methods (off by default)
  // ESLint Comments Plugin
  // The following rules are made available via `eslint-plugin-eslint-comments`
  "eslint-comments/no-aggregating-enable": 1, // disallows eslint-enable comments for multiple eslint-disable comments
  "eslint-comments/no-unlimited-disable": 1, // disallows eslint-disable comments without rule names
  "eslint-comments/no-unused-disable": 1, // disallow disables that don't cover any errors
  "eslint-comments/no-unused-enable": 1, // // disallow enables that don't enable anything or enable rules that weren't disabled
  // Flow Plugin
  // The following rules are made available via `eslint-plugin-flowtype`
  "flowtype/define-flow-type": 1,
  "flowtype/use-flow-type": 1,
  // Prettier Plugin
  // https://github.com/prettier/eslint-plugin-prettier
  // "prettier/prettier": [
  //   2,
  //   "fb",
  //   "@format"
  // ],
  // Stylistic Issues
  // These rules are purely matters of style and are quite subjective.
  "key-spacing": 0,
  "keyword-spacing": 1, // enforce spacing before and after keywords
  "jsx-quotes": [
    1,
    "prefer-double"
  ], // enforces the usage of double quotes for all JSX attribute values which doesn’t contain a double quote
  "comma-spacing": 0,
  "no-multi-spaces": 0,
  "brace-style": 0, // enforce one true brace style (off by default)
  "camelcase": 0, // require camel case names
  "consistent-this": 1, // enforces consistent naming when capturing the current execution context (off by default)
  "eol-last": 1, // enforce newline at the end of file, with no multiple empty lines
  "func-names": 0, // require function expressions to have a name (off by default)
  "func-style": 0, // enforces use of function declarations or expressions (off by default)
  "new-cap": 0, // require a capital letter for constructors
  "new-parens": 1, // disallow the omission of parentheses when invoking a constructor with no arguments
  "no-nested-ternary": 0, // disallow nested ternary expressions (off by default)
  "no-array-constructor": 1, // disallow use of the Array constructor
  "no-empty-character-class": 1, // disallow the use of empty character classes in regular expressions
  "no-lonely-if": 0, // disallow if as the only statement in an else block (off by default)
  "no-new-object": 1, // disallow use of the Object constructor
  "no-spaced-func": 1, // disallow space between function identifier and application
  "no-ternary": 0, // disallow the use of ternary operators (off by default)
  "no-trailing-spaces": 1, // disallow trailing whitespace at the end of lines
  "no-underscore-dangle": 0, // disallow dangling underscores in identifiers
  "no-mixed-spaces-and-tabs": 1, // disallow mixed spaces and tabs for indentation
  "quotes": [
    1,
    "single",
    "avoid-escape"
  ], // specify whether double or single quotes should be used
  "quote-props": 0, // require quotes around object literal property names (off by default)
  "semi": 1, // require or disallow use of semicolons instead of ASI
  "sort-vars": 0, // sort variables within the same declaration block (off by default)
  "space-in-brackets": 0, // require or disallow spaces inside brackets (off by default)
  "space-in-parens": 0, // require or disallow spaces inside parentheses (off by default)
  "space-infix-ops": 1, // require spaces around operators
  "space-unary-ops": [
    1,
    {
      "words": true,
      "nonwords": false
    }
  ], // require or disallow spaces before/after unary operators (words on by default, nonwords off by default)
  "max-nested-callbacks": 0, // specify the maximum depth callbacks can be nested (off by default)
  "one-var": 0, // allow just one var statement per function (off by default)
  "wrap-regex": 0, // require regex literals to be wrapped in parentheses (off by default)
  // Legacy
  // The following rules are included for compatibility with JSHint and JSLint. While the names of the rules may not match up with the JSHint/JSLint counterpart, the functionality is the same.
  "max-depth": 0, // specify the maximum depth that blocks can be nested (off by default)
  "max-len": 0, // specify the maximum length of a line in your program (off by default)
  "max-params": 0, // limits the number of parameters that can be used in the function declaration. (off by default)
  "max-statements": 0, // specify the maximum number of statement allowed in a function (off by default)
  "no-bitwise": 1, // disallow use of bitwise operators (off by default)
  "no-plusplus": 0, // disallow use of unary operators, ++ and -- (off by default)
  // React Plugin
  // The following rules are made available via `eslint-plugin-react`.
  "react/display-name": 0,
  "react/jsx-boolean-value": 0,
  "react/jsx-no-comment-textnodes": 1,
  "react/jsx-no-duplicate-props": 2,
  "react/jsx-no-undef": 2,
  "react/jsx-sort-props": 0,
  "react/jsx-uses-react": 1,
  "react/jsx-uses-vars": 1,
  "react/no-did-mount-set-state": 1,
  "react/no-did-update-set-state": 1,
  "react/no-multi-comp": 0,
  "react/no-string-refs": 1,
  "react/no-unknown-property": 0,
  "react/prop-types": 0,
  "react/react-in-jsx-scope": 1,
  "react/self-closing-comp": 1,
  "react/wrap-multilines": 0,
  // React-Native Plugin
  // The following rules are made available via `eslint-plugin-react-native`
  "react-native/no-inline-styles": 1,
  // Jest Plugin
  // The following rules are made available via `eslint-plugin-jest`.
  "jest/no-disabled-tests": 1,
  "jest/no-focused-tests": 1,
  "jest/no-identical-title": 1,
  "jest/valid-expect": 1
},
"overrides": [
  {
    "files": [
      "local-cli/**/*.js"
    ],
    "rules": {
      "lint/extra-arrow-initializer": 0,
      "no-alert": 0,
      "no-console-disallow": 0
    },
    "env": {
      "node": true
    }
  }
]
}

  1. JetBrains WebStorm 2019.2.4 配置运行环境

在这里插入图片描述
按百度出来的一步一步操作,到箭头指的那一步应该添加**React-native.cmd**,而不是React-native。

4. 首次运行报错

Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.

解决办法:查看node版本,我的版本是12.13.1,版本太高了,然后我降低到v10.13.0版本就可以了。晚上说的解决办法都试了一遍,完全没用。

5. PermissionsAndroid使用不会调起系统权限弹窗

解决办法:确认下Android项目配置文件AndroidManifest 是否添加了相应权限。

6. 打包报错

Execution failed for task ‘:react-native-picker:verifyReleaseResources’.

解决办法:首先在node_modules中找到报错的包里面的build.gradle,比如我这个react-native-picker,然后修改compileSdkVersion与项目Android/app/build.gradle保持一致

底部导航结合顶部导航跳转问题

打印this.props.navigation 一直是 undefined
点击跳转项目报错ReactNativeJS: TypeError: undefined is not an object (evaluating '_this.props.navigation.navigate')

扫描二维码关注公众号,回复: 11471452 查看本文章

解决方案:在承载导航的页面里面传入navigation={this.props.navigation},例如下图:
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/TLuffy/article/details/103260801
今日推荐