React-native初学入坑指南

本文主要是介绍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环境遇到的问题

没有代码提示

解决办法：添加如下图插件：

在这里插入图片描述

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

在App.js文件写内容出现红色波浪线
解决办法：
替换如下文件。

{
"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}}
]
}

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')

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