使用react-native-web在android上运行
使用react-native-web在android上运行
提问于 2017-12-16 22:54:52
我是新的反应和反应原生，我想建立一个跨平台的应用程序，将使用移动平台上的原生组件。
我安装并初始化了一个react-native-app，并安装了react-native-web，我想知道如何在android模拟器上启动我的样板代码，文档中没有说明如何启动。
回答 2
Stack Overflow用户
发布于 2017-12-16 23:16:56
使用这些命令获取演示代码
反应本机npm install create-react-native-app
- create-react-native-app AwesomeProject
- cd AwesomeProject
- npm start or -
- start -g
一旦你熟悉了基础知识。我建议你的样板代码，你必须检查出来。
Stack Overflow用户
发布于 2017-12-17 02:55:52
Web视图组件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);
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47846882
复制相关文章
相似问题
腾讯云开发者
