Update ListView Basics to use FlatList, SectionList.

Summary:
The new list views, FlatList and SectionList, are recommended over ListView.

Built website on localhost and verified the guide is rendered correctly.

![screencapture-localhost-8079-react-native-docs-using-a-listview-html-1495834607096](https://cloud.githubusercontent.com/assets/165856/26513523/c5d2913a-4220-11e7-8c8d-68bb12c75736.png)
Closes https://github.com/facebook/react-native/pull/14210

Differential Revision: D5149151

Pulled By: hramos

fbshipit-source-id: f28f02ee8893c4723c73d610b96ccda51cc31410
This commit is contained in:
Hector Ramos
2017-06-02 12:37:51 -07:00
committed by Facebook Github Bot
parent 07ee04d7bd
commit c419ae8c8d
4 changed files with 107 additions and 37 deletions

View File

@@ -15,8 +15,10 @@ var React = require('React');
const PropTypes = require('prop-types');
const LatestSDKVersion = '15.0.0';
const LatestSDKVersion = '16.0.0';
var ReactNativeToExpoSDKVersionMap = {
'0.44': '17.0.0',
'0.43': '16.0.0',
'0.42': '15.0.0',
'0.41': '14.0.0',
};
@@ -51,8 +53,12 @@ var SnackPlayer = React.createClass({
render() {
var code = encodeURIComponent(this.props.children);
var params = this.parseParams(this.props.params);
var platform = params.platform ? params.platform : 'ios';
var name = params.name ? decodeURIComponent(params.name) : 'Example';
var platform = params.platform
? params.platform
: 'ios';
var name = params.name
? decodeURIComponent(params.name)
: 'Example';
var description = params.description
? decodeURIComponent(params.description)
: 'Example usage';
@@ -60,16 +66,22 @@ var SnackPlayer = React.createClass({
var optionalProps = {};
var { version } = this.context;
if (version === 'next') {
optionalProps['data-snack-sdk-version'] = LatestSDKVersion;
optionalProps[
'data-snack-sdk-version'
] = LatestSDKVersion;
} else {
optionalProps['data-snack-sdk-version'] = ReactNativeToExpoSDKVersionMap[
version
] || LatestSDKVersion;
optionalProps[
'data-snack-sdk-version'
] = ReactNativeToExpoSDKVersionMap[version] ||
LatestSDKVersion;
}
return (
<div className="snack-player">
<div className="mobile-friendly-snack" style={{ display: 'none' }}>
<div
className="mobile-friendly-snack"
style={{ display: 'none' }}
>
<Prism>
{this.props.children}
</Prism>
@@ -77,7 +89,8 @@ var SnackPlayer = React.createClass({
<div
className="desktop-friendly-snack"
style={{ marginTop: 15, marginBottom: 15 }}>
style={{ marginTop: 15, marginBottom: 15 }}
>
<div
data-snack-name={name}
data-snack-description={description}