我是本机新手。我想创建一个具有本机响应的应用程序，该应用程序将适用于Web和移动设备（iOS，Android）。
因此，为了解决我的问题，我将转到以下链接。
https://react-native-training.github.io/react-native-elements/blog/2018/12/13/react-native-web.html
它在Web和移动设备上运行良好。
由于我的项目想要在react native中进行一些配置，所以我使用的是 React Native Element [here]，并且在将该模块添加到我的项目中后效果很好。
现在，我要在项目中添加一个模块。它给了我错误。
我想添加反应导航。所以我更喜欢以下链接来添加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 （是 反应导航）
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"
}
}]
],
};
};
如何解决我的问题。预先感谢。
答案 0 :(得分：0)
您忘了在第33行“返回”之后添加（）
您的视图需要放在方括号内，即
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>
)
答案 1 :(得分：0)
我找到了一个解决方案，摘自：
https://github.com/necolas/react-native-web/issues/1411#issuecomment-551169082
他指向一个解决该问题的示例应用程序：
https://github.com/possiblytyler/rnNavWebAppExample/blob/master/package.json
问题是Webpack与react-native相比如何编译模块。他安装了一个黑客工具（称为react-app-rewired），可以使用名为config-overrides.js的配置文件重新配置脚本。在文件中，您可以指定要重新编译的文件列表（不要问我它是如何工作的）。然后，在package.json中，用react-app-rewired替换对react-scripts的调用。
https://github.com/timarney/react-app-rewired
我现在在其他模块中仍然出现错误，但这也许可以为您解决问题。
更新：我修复了这些错误，它们不相关。现在对我有用！