如何在同一项目中配置React Js和React Native?

时间:2018-07-27 13:13:15

标签: reactjs react-native redux

我想在同一项目中将React js用于Web并在本机中对移动进行React本机用于Redux和样式表。

我见过这样的git repos ReactNativeWebHelloWorld,但我认为该应用程序是用较旧的版本编写的,因此无法正常工作。 我想世博会将新版本作为默认设置。 我无法摆脱困境。

是否有可能使用React 16和React Native ^ 0.5,Expo ..?  编辑:对于package.json

{
  "name": "ReactNativeWebHelloWorld",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native-scripts start",
    "ios-bundle": "react-native bundle --dev false --entry-file index.ios.js --platform ios --bundle-output ios/main.jsbundle",
    "ios-dev-bundle": "react-native bundle --entry-file index.ios.js --platform ios --bundle-output ios/main.jsbundle",
    "android-bundle": "react-native bundle --dev false --entry-file index.android.js --platform android --bundle-output android/app/src/main/assets/index.android.bundle",
    "android-dev-bundle": "react-native bundle --entry-file index.android.js --platform android --bundle-output android/app/src/main/assets/index.android.bundle",
    "web-bundle": "webpack --config web/webpack/web.prod.config.js --progress --colors",
    "web-dev": "webpack-dev-server --content-base web/public/ --config web/webpack/web.dev.config.js --port 3001 --inline --hot --colors",
    "clear-cache": "gulp clear-cache"
  },
  "dependencies": {
    "babel": "^6.3.26",
    "babel-polyfill": "^6.3.14",
    "clone": "^2.1.1",
    "morgan": "^1.6.1",
    "object-assign": "^4.0.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-native": "^0.56.0",
    "react-redux": "^5.0.7",
    "redux": "^3.1.1",
    "redux-thunk": "^2.3.0",
    "superagent": "^3.8.3",
    "expo": "^27.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^9.0.1",
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.4.5",
    "babel-loader": "^7.1.5",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "css-loader": "^1.0.0",
    "gulp": "^3.9.0",
    "json-loader": "^0.5.4",
    "less": "^3.8.0",
    "less-loader": "^4.1.0",
    "react-native-cli": "^2.0.1",
    "react-transform-catch-errors": "^1.0.1",
    "react-transform-hmr": "^1.0.1",
    "redbox-react": "^1.3.2",
    "redux": "^4.0.0",
    "redux-devtools": "^3.3.1",
    "redux-devtools-dock-monitor": "^1.1.1",
    "redux-devtools-log-monitor": "^1.0.11",
    "redux-logger": "^3.0.6",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.3",
    "webpack-dev-middleware": "^3.1.3",
    "webpack-dev-server": "^3.1.5",
    "webpack-hot-middleware": "^2.6.4",
    "react-native-scripts": "1.14.0",
    "jest-expo": "~27.0.0",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "jest-expo"
  }
}

编辑:当我想在android模拟器上运行时,我会收到此警告和错误

E:\NewProjects\react-native-web-hello-world-master>react-native run-android
Scanning folders for symlinks in E:\NewProjects\react-native-web-hello-world-master\node_modules (65ms)Starting JS server...
Building and installing the app on the device (cd android && gradlew.bat installDebug)...
Starting a Gradle Daemon, 1 incompatible and 1 stopped Daemons could not be reused, use --status for details
cache fileHashes.bin (C:\Users\H³seyin\.gradle\caches\4.9\fileHashes\fileHashes.bin) is corrupt. Discarding.

> Configure project :app
WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation'.
It will be removed at the end of 2018

> Task :app:mergeDebugResources FAILED
Error: E:\NewProjects\react-native-web-hello-world-master\android\app\build\intermediates\incremental\mergeDebugResources\merged.dir\values\values.xml (Eri■im engellendi)

FAILURE: Build failed with an exception.

* What went wrong:
Failed to capture snapshot of output files for task ':app:mergeDebugResources' property 'incrementalFolder' during up-to-date check.
> Could not read path 'E:\NewProjects\react-native-web-hello-world-master\android\app\build\intermediates\incremental\mergeDebugResources\merged.dir\values'.

* 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

BU¦LD FAILED in 17s
11 actionable tasks: 1 executed, 10 up-to-date
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

1 个答案:

答案 0 :(得分:1)

我正在同时运行API

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "react": "webpack-dev-server --open --mode development",
    "api": "nodemon ./bin/www",
    "start": "concurrently \"npm run react\" \"npm run api\"",
    "build": "webpack --mode production"
  }