我对创建一个既可用于移动网络又可用于响应本机网络的简单反应模块有疑问。
我在react native模块中定义了简单的Component-请参见下面的index.js。现在为了响应本机Web，需要将index.js转换为ES5（例如/node_modules/.bin/babel src --out-file index.js）。但是，对于移动设备，不需要翻译。
我的问题是如何使该组件既可用于Web又可作为react模块的一部分使用？ （因为package.json中只有一个主要属性）。
index.js
import React, { Component } from 'react';
import { Text } from 'react-native';
class DummyComponent extends Component {
render () {
return (
<Text>hello World</Text>
)
}
}
export default DummyComponent;
package.json：
{
"name": "react-test-module",
"version": "1.0.0",
"description": "test module",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "./node_modules/.bin/babel src --out-file index.js"
},
"repository": {
"type": "git",
"url": ""
},
"author": "The man",
"license": "MIT",
"peerDependencies": {
"react-native": "^0.61.5",
"react": "^16.9.0",
"react-dom": "^16.12.0"
},
"devDependencies": {
"@babel/cli": "^7.7.7",
"@babel/core": "^7.7.7",
"@babel/preset-env": "^7.7.7",
"@babel/preset-react": "^7.7.4",
"react": "^16.12.0",
"react-native": "^0.61.5",
"react-dom": "^16.12.0"
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.7.4",
"react-native": "^0.61.5"
}
}
因此，如果需要两个不同的版本，可以使用平台特定的索引文件扩展名。
您可以为index.js创建三个文件，所以其中一个就是index.js，您可以将其用于可翻译的Web版本，也可以创建两个不同的文件
[index.ios.js和index.android.js，将用于移动设备，它们可以与您现在拥有的文件完全一样。
这是两个文件，运行平台将自动选择它们。
只需使用react-native-web，无需使用任何其他翻译。
您可以参考非常好的文档here
如果您想使用创建React App
npx create-react-app my-app
cd my-app
npm install react-native-web
npm start
如果是独立应用程序，请遵循步骤here
[如果您希望此组件在React Web应用程序和React Native上都可以使用，我认为ReactXP应该是您想要的