带有 React Native 导航的 SyntaxError

Question

I am newbie in react native. I want to create one app with react native which will work for web and mobile (ios, android).

So, For solving my problem I am going to following link.

https://react-native-training.github.io/react-native-elements/blog/2018/12/13/react-native-web.html

It's working well for web and mobile.

As My project want to some configuration in react native so I am using React Native Element [here] and It's working well after adding this module into my project.

Now, I am adding one more module into my project. It gave me error.

I want to add React Navigation . So I preferred following link for add React Navigation: https://reactnavigation.org/docs/en/getting-started.html

Whenever I import that module into my project followed bylink . eg

    import { createStackNavigator, createAppContainer } from "react-navigation";

It gave me following error:

    ./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>

Here is ResourceSavingSceneView.js ( It is pre-coded file of 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;

Here is my 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"
      ]
    }

here is my 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"
            }
          }]
        ],
      };
    };

How to solved my problem. Thanks in Advance.

Answer 1

You forgot to add () after "return" on line number 33

Your Views need to be inside the round brackets ie

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

Answer 2

I found a solution, taken from:

https://github.com/necolas/react-native-web/issues/1411#issuecomment-551169082

He points to an example app which works around the issue:

https://github.com/possiblytyler/rnNavWebAppExample/blob/master/package.json

The problem is how Webpack compiles modules as compared to react-native. He installed a hack tool (called react-app-rewired) that can reconfigure scripts using a config file named config-overrides.js. In the file you can specify a list of files that are to be recompiled (don't ask me how it works exactly). Then, in your package.json, replace calls to react-scripts by react-app-rewired.

https://github.com/timarney/react-app-rewired

I'm still getting errors in other modules now, but maybe this will solve the problem for you.

UPDATE: I fixed these errors, they were unrelated. It works for me now!