我试图运行本机模拟器。
但是,此错误是在模拟器中出现的:
Failed to load bundle(http://localhost:8081/index.bundle?
platform=ios&dev=true&minify=false)
with error:(/Users/sugawarasyuta/Desktop/albums/index.js:
Cannot read property 'bindings' of null(null))
我再次检查了代码语法。但是我觉得这与事实无关。您知道如何解决此错误吗?
这是我的文件:
index.js
import React from 'react';
import { AppRegistry,View } from 'react-native';
import Header from './src/components/header';
import AlbumList from './src/components/AlbumList';
//Create a component
const App = () => (
<View>
<Header headerText= {'albums'} />
<AlbumList />
</View>
);
AppRegistry.registerComponent('albums', () => App );
AlbumList.js
import React,{Component}from 'react';
import {View, Text} from 'react-native';
import axios from 'axios';
class AlbumList extends Component {
componentWillMount(){
axios.get('https://rallycoding.herokuapp.com/api/music_albums')
.then(response => console.log(response));
}
render(){
return(
<View>
<Text>AlbumList!!!</Text>
</View>
);
}
}
export default AlbumList;
这些是终端语句:
/usr/bin/codesign --force --sign - --entitlements /Users/sugawarasyuta/Desktop/albums/ios/build/Build/Intermediates.noindex/albums.build/Debug-iphonesimulator/albums.build/albums.app.xcent --timestamp=none /Users/sugawarasyuta/Desktop/albums/ios/build/Build/Products/Debug-iphonesimulator/albums.app
/Users/sugawarasyuta/Desktop/albums/ios/build/Build/Products/Debug-iphonesimulator/albums.app: resource fork, Finder information, or similar detritus not allowed
Command /usr/bin/codesign failed with exit code 1
** BUILD FAILED **
The following build commands failed:
CodeSign build/Build/Products/Debug-iphonesimulator/albums.app
(1 failure)
Installing build/Build/Products/Debug-iphonesimulator/albums.app
Launching org.reactjs.native.example.albums
org.reactjs.native.example.albums: 8385
这是我的package.json
。这些依赖关系正确吗?
{
"name": "albums",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"axios": "^0.18.0",
"babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
"react": "16.3.1",
"react-native": "^0.56.0"
},
"devDependencies": {
"@babel/preset-env": "^7.0.0-beta.53",
"babel-jest": "23.0.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react-native": "4.0.0",
"eslint-config-rallycoding": "^3.2.0",
"jest": "23.1.0",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}
我将"babel-preset-react-native"
从"4.0.0"
升级到"^5.0.1"
,然后出现另一个错误:
error: bundling failed: SyntaxError:
/Users/sugawarasyuta/Desktop/albums/index.js: Unexpected token (11:3)
10 | const App = () => {
> 11 | <Header headerText= {'albums'} />
| ^
12 |
13 | };
at Parser.raise
(/Users/sugawarasyuta/Desktop/albums/node_modules
/@babel/core/node_modules/babylon/lib/index.js:776:15)
at Parser.unexpected
(/Users/sugawarasyuta/Desktop/albums/node_modules/
@babel/core/node_modules/babylon/lib/index.js:2079:16)
at Parser.parseExprAtom (/Users/sugawarasyuta/Desktop/albums/node_modules/@babel/core/node_modules/babylon/lib/index.js:3157:20)
at Parser.parseExprSubscripts (/Users/sugawarasyuta/Desktop/albums/node_modules/@babel/core/node_modules/babylon/lib/index.js:2757:21)
at Parser.parseMaybeUnary (/Users/sugawarasyuta/Desktop/albums/node_modules/@babel/core/node_modules/babylon/lib/index.js:2736:21)
at Parser.parseExprOps (/Users/sugawarasyuta/Desktop/albums/node_modules/@babel/core/node_modules/babylon/lib/index.js:2643:21)
at Parser.parseMaybeConditional (/Users/sugawarasyuta/Desktop/albums/node_modules/@babel/core/node_modules/babylon/lib/index.js:2615:21)
at Parser.parseMaybeAssign (/Users/sugawarasyuta/Desktop/albums/node_modules/@babel/core/node_modules/babylon/lib/index.js:2562:21)
at Parser.parseExpression (/Users/sugawarasyuta/Desktop/albums/node_modules/@babel/core/node_modules/babylon/lib/index.js:2515:21)
at Parser.parseStatementContent (/Users/sugawarasyuta/Desktop/albums/node_modules/@babel/core/node_modules/babylon/lib/index.js:4076:21)
BUNDLE [ios, dev] ../../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
我觉得这不仅仅是因为语法错误,而是导致依赖的原因。你知道我该怎么解决吗?
答案 0 :(得分:31)
没有任何更多信息,我怀疑您需要更新babel-preset-react-native。
升级到0.56时,请确保颠簸 babel-preset-react-native package.json依赖于^ 5.0.1或更高版本。
答案 1 :(得分:10)
升级到React Native 0.57时,请按照以下步骤解决此问题:
将package.json
中的React版本升级到16.5
将babel-preset依赖项从"babel-preset-react-native": "^5"
更改为"metro-react-native-babel-preset": "^0.45.0"
将.babelrc
的配置更改为:
{
"presets": ["module:metro-react-native-babel-preset"]
}
运行rm -rf node_modules/
删除旧模块
运行npm install
以获得新的node_modules/
运行react-native upgrade
升级您的配置文件
运行rm -rf android/build/ ios/build/
摆脱旧的已编译应用
再次运行您的应用程序,它应该可以运行!
答案 2 :(得分:1)
反应原生0.57新鲜安装iOS ANDROID
我从react-native初始projectName中重新安装了react native
package.json
{
"name": "JesteeTestee",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "^16.5.2",
"react-native": "0.57.4"
},
devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "^0.47.0",
"react-test-renderer": "16.6.0-alpha.8af6728"
},
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
}
}
}
您会看到它是RN@0.57.4和metro-react-native-babel-preset@0.47.0的最新版本。
也是默认的.babelrc
{
"presets": ["module:metro-react-native-babel-preset"]
}
只需将以下内容添加到package.json的Jest部分;
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
}
考虑到我今天所花的时间,如果您要进行全新安装并遇到问题,请删除项目,然后重新开始并仅尝试此简单步骤。
已针对本地原生的run-ios和run-android进行了测试。
答案 3 :(得分:0)
对于 React-Native 版本 0.57 或更高版本
在 babel.config.js 上,只需更改预设如下
"presets": ["module:metro-react-native-babel-preset"]
在尝试了许多不同的解决方案后,这对我有用