帶有 React Native 導航的 SyntaxError
[英]SyntaxError with React Native Navigation
問題描述
我是 React Native 的新手。 我想創建一個具有本機反應的應用程序，它適用於網絡和移動設備（ios、android）。
所以，為了解決我的問題，我將點擊鏈接。
https://react-native-training.github.io/react-native-elements/blog/2018/12/13/react-native-web.html
它適用於網絡和移動設備。
由於我的項目想要在React Native 中進行一些配置，所以我使用React Native Element [here]並且在將此模塊添加到我的項目后運行良好。
現在，我在我的項目中再添加一個模塊。 它給了我錯誤。
我想添加React Navigation 。 所以我更喜歡以下鏈接來添加 React Navigation： https : //reactnavigation.org/docs/en/getting-started.html
每當我將該模塊導入我的項目時，后跟link 。 例如
import { createStackNavigator, createAppContainer } from "react-navigation";
它給了我以下錯誤：
./node_modules/@react-navigation/native/dist/ResourceSavingSceneView.js
SyntaxError: /home/firstproject/node_modules/@react-navigation/native/dist/
ResourceSavingSceneView.js: Unexpected token (33:11)
31 | } = this.props;
32 |
> 33 | return <View style={styles.container} collapsable={false}
removeClippedSubviews={Platform.OS === 'android' ?
removeClippedSubviews : !isFocused && removeClippedSubviews}>
| ^
34 | <View style={this._mustAlwaysBeVisible() || isFocused ?
styles.innerAttached : styles.innerDetached}>
35 | {awake ? <SceneView {...rest} navigation=
{childNavigation} /> : null}
36 | </View>
這是ResourceSavingSceneView.js （它是 React Navigation 的預編碼文件）
1. import React from 'react';
2. import { Platform, StyleSheet, View } from 'react-native';
3. import { SceneView } from '@react-navigation/core';
4.
5. const FAR_FAR_AWAY = 3000; // this should be big enough to move the whole view out of its container
6.
7. class ResourceSavingSceneView extends React.PureComponent {
8. static getDerivedStateFromProps(nextProps, prevState) {
9. if (nextProps.isFocused && !prevState.awake) {
10. return { awake: true };
11. } else {
12. return null;
13. }
14. }
15.
16. constructor(props) {
17. super();
18.
19. this.state = {
20. awake: props.lazy ? props.isFocused : true
21. };
22. }
23.
24. render() {
25. const { awake } = this.state;
26. const {
27. isFocused,
28. childNavigation,
29. removeClippedSubviews,
30. ...rest
31. } = this.props;
32.
33. return <View style={styles.container} collapsable={false} removeClippedSubviews={Platform.OS === 'android' ? false : !isFocused && false}>
34. <View style={this._mustAlwaysBeVisible() || isFocused ? styles.innerAttached : styles.innerDetached}>
35. {awake ? <SceneView {...rest} navigation={childNavigation} /> : null}
36. </View>
37. </View>;
38. }
39.
40. _mustAlwaysBeVisible = () => {
41. return this.props.animationEnabled || this.props.swipeEnabled;
42. };
43. }
44.
45. const styles = StyleSheet.create({
46. container: {
47. flex: 1,
48. overflow: 'hidden'
49. },
50. innerAttached: {
51. flex: 1
52. },
53. innerDetached: {
54. flex: 1,
55. top: FAR_FAR_AWAY
56. }
57. });
58.
59. export default ResourceSavingSceneView;
這是我的package.json
{
"name": "firstproject",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "./node_modules/.bin/react-native start",
"start-clean": "rm -rf $TMPDIR/react-* && watchman watch-del-all && npm start -- --reset-cache",
"android": "./node_modules/.bin/react-native run-android",
"ios": "./node_modules/.bin/react-native run-ios",
"web": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "npm run test:web && npm run test:native",
"test:web-watch": "node scripts/test.js --watch --config \"./config/web.jest.config.js\"",
"test:web": "node scripts/test.js --config \"./config/web.jest.config.js\"",
"test:native": "node scripts/test.js --config \"./config/native.jest.config.js\"",
"test:native-watch": "node scripts/test.js --watch --config \"./config/native.jest.config.js\"",
"coverage": "node scripts/test.js --coverage --config \"./config/web.jest.config.js\"",
"coverage:native": "node scripts/test.js --config \"./config/native.jest.config.js\" --coverage"
},
"dependencies": {
"fetch-hoc": "^0.5.0",
"formik": "^1.5.1",
"react": "^16.6.x",
"react-app-polyfill": "^0.1.3",
"react-art": "^16.6.x",
"react-dom": "^16.6.x",
"react-native": "^0.59.6",
"react-native-elements": "^1.0.0-beta8",
"react-native-gesture-handler": "^1.2.1",
"react-native-vector-icons": "^6.4.1",
"react-native-web": "^0.10.x",
"react-navigation": "^3.9.1",
"react-router-dom": "^4.3.1",
"react-router-native": "^4.3.0",
"redux": "^4.0.1"
},
"devDependencies": {
"@babel/core": "7.1.0",
"@svgr/webpack": "2.4.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "9.0.0",
"babel-jest": "23.6.0",
"babel-loader": "8.0.4",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-named-asset-import": "^0.2.3",
"babel-preset-react-app": "^6.1.0",
"bfj": "6.1.1",
"case-sensitive-paths-webpack-plugin": "2.1.2",
"chalk": "2.4.1",
"css-loader": "1.0.0",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
"eslint": "5.6.0",
"eslint-config-react-app": "^3.0.5",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-react": "7.11.1",
"file-loader": "2.0.0",
"fork-ts-checker-webpack-plugin-alt": "0.4.14",
"fs-extra": "7.0.0",
"html-webpack-plugin": "4.0.0-alpha.2",
"identity-obj-proxy": "3.0.0",
"jest": "23.6.0",
"jest-pnp-resolver": "1.0.1",
"jest-resolve": "23.6.0",
"metro-react-native-babel-preset": "^0.51.0",
"mini-css-extract-plugin": "0.4.3",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.1.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.0.6",
"postcss-safe-parser": "4.0.1",
"react-dev-utils": "^6.1.1",
"react-hot-loader": "^4.6.3",
"react-test-renderer": "^16.6.3",
"resolve": "1.8.1",
"sass-loader": "7.1.0",
"style-loader": "0.23.0",
"terser-webpack-plugin": "1.1.0",
"url-loader": "1.1.1",
"webpack": "4.19.1",
"webpack-dev-server": "^3.3.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.3"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
這是我的babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: [["module:metro-react-native-babel-preset"], ['react-app']],
ignore: [ "node_modules/art/core/color.js" ],
plugins: [
["module-resolver", {
"alias": {
"^react-native$": "react-native-web"
}
}]
],
};
};
如何解決我的問題。 提前致謝。
2 個解決方案
解決方案1
0 2019-05-02 08:37:06
您忘記在第 33 行的“return”后添加 ()
您的視圖需要在圓括號內，即
return (
<View style={styles.container} collapsable={false} removeClippedSubviews={Platform.OS === 'android' ? removeClippedSubviews : !isFocused && removeClippedSubviews}>
<View style={this._mustAlwaysBeVisible() || isFocused ? styles.innerAttached : styles.innerDetached}>
{awake ? <SceneView {...rest} navigation={childNavigation} /> : null}
</View>
</View>
)
解決方案2
0 2020-01-24 15:17:47
我找到了一個解決方案，取自：
https://github.com/necolas/react-native-web/issues/1411#issuecomment-551169082
他指出了一個解決該問題的示例應用程序：
https://github.com/possivelytyler/rnNavWebAppExample/blob/master/package.json
問題是與 react-native 相比，Webpack 如何編譯模塊。 他安裝了一個黑客工具（稱為 react-app-rewired），可以使用名為 config-overrides.js 的配置文件重新配置腳本。 在文件中，您可以指定要重新編譯的文件列表（不要問我它是如何工作的）。 然后，在你的 package.json 中，用 react-app-rewired 替換對 react-scripts 的調用。
https://github.com/timarney/react-app-rewired
我現在仍然在其他模塊中遇到錯誤，但也許這會為您解決問題。
更新：我修復了這些錯誤，它們是無關的。 它現在對我有用！
@react-navigation/native 升級到 V5 SyntaxError
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.