ReactNative遇到的问题

2019年7月23日 364次阅读 来源: itzuo

1、React Native — java.lang.string cannot …uimanager.accessibility DelegateUt

问题描述：

给页面添加 Button 组件，运行时却报出错误：

java.lang.String cannot be cast to com.facebook.react.uimanager.AccessibilityDelegateUtil$AccessibilityRole

《ReactNative遇到的问题》

解决方案：

当前我使用的是 react-native 0.57.3
这是 react-native 0.57.2 的一个 bug，但在 react-native 0.57.3 中并没有修复，所以要降低 react-native 版本至0.57.1，react-native 0.57.1 具有很好的稳定性。

在终端依次执行（在当前项目路劲下）：

  1. 删除项目里的 node_modules 文件夹
  • mac：直接到项目里删除 node_modules 文件夹
  • windows：rmdir node_modules
  1. npm i -S react-native@0.57.1
  2. npm add @babel/runtime
  3. npm i schedule@0.4.0 –save-dev
  4. npm i

执行完上述操作，打开项目中的 package.json 文件查看当前项目的 react-native 版本：

《ReactNative遇到的问题》 png

react-native 0.57.1 下载成功后，运行 run react-native run-android 或 react-native run-ios，就会成功运行。

2、React Native初始化项目时候报错？react-native init

之前初始化都没问题的，有一次初始化发现报错说网络有问题，然后再初始化就报下面的错误：

This will walk you through creating a new React Native project in /Users/zuo/RNProjects/FistApp
Using yarn v1.10.1
Installing react-native@0.57.1...
yarn add v1.10.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
error An unexpected error occurred: "https://registry.npm.taobao.org/react-native: ETIMEDOUT".
info If you think this is a bug, please open a bug report with the information provided in "/Users/zuo/RNProjects/FistApp/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
{ Error: Command failed: yarn add react-native@0.57.1 --exact
    at checkExecSyncError (child_process.js:611:11)
    at execSync (child_process.js:648:13)
    at run (/usr/local/lib/node_modules/react-native-cli/index.js:294:5)
    at createProject (/usr/local/lib/node_modules/react-native-cli/index.js:249:3)
    at init (/usr/local/lib/node_modules/react-native-cli/index.js:200:5)
    at Object.<anonymous> (/usr/local/lib/node_modules/react-native-cli/index.js:153:7)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 20940,
  stdout: null,
  stderr: null }
Command `yarn add react-native@0.57.1 --exact` failed.

出现这个问题，可以试一下执行下面二行代码

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

然后再执行一下初始化就可以了。

3、React Native运行项目时报错

在创建一个React Native项目后，使用react-native run-android运行项目时报错：

JS server already running.
Building and installing the app on the device (cd android && ./gradlew installDebug)...

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 1s
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/getting-started.html

只需要将已有掉android项目下的local.properties拷贝到当前项目的android目录下即可。

4、RN真机运行问题

当我通过Wi-Fi连接真机后运行RN项目会爆红

《ReactNative遇到的问题》

《ReactNative遇到的问题》

当我点击下面的RELOAD(R,R)后，又变成下面这个错

《ReactNative遇到的问题》

解决方法：

Android5.0以下：
  1. 首先确保你的电脑和手机设备在同一个 Wi-Fi 环境下。
  2. 在设备上运行你的 React Native 应用。和打开其它 App 一样操作。
  3. 你应该会看到一个“红屏”错误提示。这是正常的，下面的步骤会解决这个报错。
  4. 摇晃设备，或者运行adb shell input keyevent 82，可以打开开发者菜单。
  5. 点击Dev Settings -> Debug server host for device。
  6. 输入你电脑的 IP 地址和端口号（譬如 10.0.1.1:8081）。在 Mac 上，你可以在系统设置/网络里找查询你的 IP 地址。在 Windows 上，打开命令提示符并输入ipconfig来查询你的 IP 地址。在 Linux 上你可以在终端中输入ifconfig来查询你的 IP 地址。
  7. 回到开发者菜单然后选择Reload JS。

Android 5.0及以上使用adb reverse命令

首先把你的设备通过USB数据线连接到电脑上，并开启USB调试

运行：

adb reverse tcp:8081 tcp:8081

不需要更多配置，你就可以使用Reload JS和其它的开发选项了。每次修改完js代码，摇一摇手机，点击reload 就可以生效了。

5、RN的Navigator报错

报错：

Invariant Violation: Navigator is deprecated and has been removed from this package. It can now be installed and imported from `react-native-deprecated-custom-components` instead of `react-native`. Learn about alternative navigation solutions at http://facebook.github.io/react-native/docs/navigation.html

《ReactNative遇到的问题》

这是因为版本升级到0.43以上的话，Navigator不能直接从react-native里面获取了，

解决方案：

npm install react-native-deprecated-custom-components --save

然后在引用的地方

import {Navigator } from 'react-native-deprecated-custom-components';

6、React Native使用PropTypes类型检查报错

当在使用PropTypes时报如下错误

《ReactNative遇到的问题》

示例代码：

import React, {Component,PropTypes} from 'react';
import {
    Text,
    View
} from 'react-native';


export default class PropsTest extends Component{
    //设置默认属性
    static defaultProps={
        name:"小红",
        age:20,
        sex:"男"
    }
    //类型检测
    static propTypes={
        name:PropTypes.string
    }
    render(){
        return (
            <View>
                <Text style={{fontSize:20,backgroundColor:'red'}}>你好: {this.props.name}</Text>
                <Text style={{fontSize:20,backgroundColor:'red'}}>年龄: {this.props.age}</Text>
                <Text style={{fontSize:20,backgroundColor:'red'}}>性别: {this.props.sex}</Text>
            </View>
        );
    }
}

根据报错提示，错误锁定在这行代码上name:PropTypes.string，然后Google出答案，发现是React的版本升级导致的。

在React 15.5.0 之后的版本中，将PropTypes从React库中废除掉了，当我们需要使用PropTypes时，我们需从prop-types中导出PropTypes即可。

import PropTypes from 'prop-types'

错误总结

在React 15.5.0 之后的版本，我们就不要再已这种方式导出PropTypes了

import React, { Component, PropTypes} from 'react'

更换为：

import PropTypes from 'prop-types'

安装prop-types库

npm install prop-types --save

7、react native 使用createStackNavigator中安卓的标题不居中

先上代码，下面的代码中，在苹果中标题title是默认居中的，但安卓上却是居左的，

const HomeStack = createStackNavigator({
    Home:{
        screen:Home,
        navigationOptions:{
            title:'首页',
            headerTitleStyle:{alignSelf:'center'},
            
        },
    },

解决方法1

Home:{
    screen:Home,
    navigationOptions:{
        title:'首页',
        headerTitleStyle:{
        flex: 1,textAlign:'center'}

    },
},

在headerTitleStyle中添加 flex: 1,textAlign:'center' 就能解决安卓title不居中但问题了

解决方法2
去 node_modules/react-navigation-stack/dist/views/Header/Header.js中的 title 属性一栏里，大概在571行，把

justifyContent: Platform.OS === 'ios' ? 'center' : 'flex-start',

这句改写为

justifyContent: Platform.OS === 'ios' ? 'center' : 'center',

8、ReactNative打包Android Apk报错

执行gradlew assembleRelease时，报的一个问题，错误路径直指node_module。

Failed to capture snapshot of input files for task ':app:bundleReleaseJsAndAssets' property '$1' during up-to-date check.
> Could not list contents of '/Users/jay/Documents/RN/NavigationDemo/node_modules/metro/node_modules/jest-haste-map/node_modules/.bin/sane'. Couldn't follow symbolic link.

《ReactNative遇到的问题》 png

这时我的解决方案是，删除node_module文件夹。重新npm install

重新gradlew assembleRelease,然后OK了

    原文作者：itzuo
    原文地址: https://www.jianshu.com/p/b9771bbac546
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞