使用 react-native-web 在 android 上运行答案

【问题标题】：Run on android with react-native-web使用 react-native-web 在 android 上运行
【发布时间】：2017-12-16 14:54:51
【问题描述】：

我是 React 和 React Native 的新手，我想构建一个跨平台应用程序，该应用程序将在移动平台上使用原生组件。

我安装并初始化了一个 react-native-app 并安装了 react-native-web，我想知道如何在 android 模拟器上启动我的样板代码，文档没有说明如何。

【问题讨论】：

标签： reactjs react-native react-native-web

【解决方案1】：

使用这些命令获取演示代码

npm install -g create-react-native-app
create-react-native-app AwesomeProject
cd AwesomeProject
npm start 或 react-native start

一旦您熟悉了基础知识。我建议您必须检查样板代码。
1.https://github.com/cubixlabs/ReactCube
2.https://github.com/GeekyAnts/NativeBase 3.https://github.com/shoutem/ui

【讨论】：

那么我应该先创建一个 RN 应用，然后添加 RN-web 以支持浏览器吗？
我相信 RN 应用程序可以在 Android 和 IOS 上运行，对于 Web 应用程序你将不得不看到 React JS。 reactjs.org
他们可以，但是有一个库：github.com/necolas/react-native-web 可以为 3 个平台绑定一个代码。只是想知道如何真正使用它并从中启动一个 Android 模拟器。
我想我已经给出了您的答案，请查看我的第二个答案。 @MaximeB

【解决方案2】：

网页视图组件 index.js

// @flow
import React from "react";
import PropTypes from "prop-types";
import {
  WebView as WebViewRn
} from "react-native";

export default class WebView extends React.PureComponent {
  static propTypes = {
    source: PropTypes.object
  };
  static defaultProps = {
    source: {
      html: `
				<html>
					<header>
						<style>
							html, body {
								height: 100%;
							}
							html {
								display: table;
								margin: auto;
							}
							body {
  							text-align: center;
								display: table-cell;
								vertical-align: middle;
							}
						</style>
					</header>
					<body>
						<p>No valid HTML provided</p>
						<p>source props is missing</p>
					</body>
				</html>
			`
    }
  };

  render() {
    const {
      source,
      ...rest
    } = this.props;
    return <WebViewRn source = {
      source
    } { ...rest
    }
    />;
  }
}

组件：Styles.js

// @flow
import {
  StyleSheet
} from 'react-native';
import {
  Colors
} from '../../theme';

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.primary.backgroundColor
  }
});

容器类 index.js

// @flow

/*
Disable selection style
style="-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;"

Word wrap and break word style
style="word-wrap: break-word;"
*/
import {
  connect
} from "react-redux";
import React, {
  Component
} from "react";
import {
  WebView
} from "../../components";

class Terms extends Component {
  render() {
    return <WebView source = {
      {
        html
      }
    }
    />;
  }
}

const html = `
<!DOCTYPE html>
<html lang="en">

<head>
	<style>
		.container {
			margin: 0 auto;
		}

		h2 {
			color: #000;
			margin-bottom: 15px;
			font-size: 30px;
			font-weight: 700;
			font-family: 'Roboto', sans-serif;
			line-height: 1.2;
			margin-top: 25px;
		}

		p {
			font-family: 'Roboto', sans-serif;
			text-align: left;
			line-height: 26px;
			font-weight: 300;
			font-style: normal;
			color: #000;
			font-size: 18px;
		}
	</style>
</head>

<body>
	<div class="container" style="-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;">
		<h2>Disclaimer</h2>

		<p>Always make sure to double check recipe and component ingredients (and where they are produced) if you have any health
			related issues to avoid particular foods. Please make sure to consult a doctor and always double check labels. Please
			notify us of any errors on the recipes itself. We strive to make information as acurate as possible for convenience, however
			we disclaim any warranty on it.</p>
		<p>Always consult a licensed physician or licesned nutritionalist for all medical, dietary and allergen issues. All information
			on our site “as is” has no warranty on it of any kind. Either expressed or implied. </p>
		<p>Rich thomas LLC and its partners disclaim all warranties expressed or implied including without limitation those of merchanitbility
			or fitness for a particular purpose and non fringement or arsiing from a course of dealing, usage, or trade practice.
			Rich Thomas LLC shall not be liable for any indirect, special, consequential, or incidental damages arising from any information
			present.</p>
	</div>
</body>

</html>`;

const mapStateToProps = () => ({});

const actions = {};

export default connect(mapStateToProps, actions)(Terms);

【讨论】：

谢谢你的回答，不过我只是问如何在模拟器或设备上运行我的代码。
演示代码可以运行模拟器。我已将 Component for Web View 设为 Mention 。您只需在 Container 中调用它，您就可以看到 Web 视图响应