I'm new to React and React Native, I want to build a cross platform app which would use native components on mobile platforms.
I installed and initialized a react-native-app and install react-native-web and I wonder how to start my boilerplate code on android emulator, the documentation doesn't tell how.
使用这些命令获取演示代码
一旦你熟悉了基础知识。我建议您必须检查样板代码。
1. https://github.com/cubixlabs/ReactCube
2. https://github.com/GeekyAnts/NativeBase
3. https://github.com/shoutem/ui
网页视图组件 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
}
/>;
}
}组件：样式.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);