Add Components and APIs Overview Guide
Summary: Essential components such as View, Text, and Button are easily overlooked amongst the long list of components and APIs due to a lack of categorization. The basic components are already introduced as part of the tutorial, but they may be missed by people who prefer scanning over the docs. Built website on localhost. Preview of the website as seem on Chrome on macOS:  Preview as seen on an iPhone Plus (via Chrome console):  Closes https://github.com/facebook/react-native/pull/14265 Differential Revision: D5192597 Pulled By: hramos fbshipit-source-id: f281a14230468458f3da674a82df263fb9f064f4
This commit is contained in:
Hector Ramos
Facebook Github Bot
parent
236e9e4d01
commit
4f3da46146
|
|
@ -0,0 +1,235 @@
|
|||
---
|
||||
id: components
|
||||
title: Components and APIs
|
||||
layout: docs
|
||||
category: Guides
|
||||
permalink: docs/components-and-apis.html
|
||||
next: handling-touches
|
||||
previous: more-resources
|
||||
---
|
||||
|
||||
React Native provides a number of built-in components. You will find a full list of components and APIs on the sidebar to the left. If you're not sure where to get started, take a look at the following categories:
|
||||
|
||||
- [Basic Components](docs/components-and-apis.html#basic-components)
|
||||
- [User Interface](docs/components-and-apis.html#user-interface)
|
||||
- [Lists Views](docs/components-and-apis.html#lists-views)
|
||||
- [iOS-specific](docs/components-and-apis.html#ios-components-and-apis)
|
||||
- [Android-specific](docs/components-and-apis.html#android-components-and-apis)
|
||||
- [Others](docs/components-and-apis.html#others)
|
||||
|
||||
You're not limited to the components and APIs bundled with React Native. React Native is a community of thousands of developers. If you're looking for a library that does something specific, search the npm registry for packages mentioning [react-native](https://www.npmjs.com/search?q=react-native&page=1&ranking=optimal), or check out [Awesome React Native](http://www.awesome-react-native.com/) for a curated list.
|
||||
|
||||
## Basic Components
|
||||
|
||||
Most apps will end up using one of these basic components. You'll want to get yourself familiarized with all of these if you're new to React Native.
|
||||
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<h3><a href="docs/view.html">View</a></h3>
|
||||
<p>The most fundamental component for building a UI.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/text.html">Text</a></h3>
|
||||
<p>A component for displaying text.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/image.html">Image</a></h3>
|
||||
<p>A component for displaying images.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/textinput.html">TextInput</a></h3>
|
||||
<p>A component for inputting text into the app via a keyboard.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/scrollview.html">ScrollView</a></h3>
|
||||
<p>Provides a scrolling container that can host multiple components and views.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/button.html">Button</a></h3>
|
||||
<p>A basic button component for handling touches that should render nicely on any platform.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## User Interface
|
||||
|
||||
Render common user interface controls on any platform using the following components. For platform specific components, keep reading.
|
||||
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<h3><a href="docs/picker.html">Picker</a></h3>
|
||||
<p>Renders the native picker component on iOS and Android.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/slider.html">Slider</a></h3>
|
||||
<p>A component used to select a single value from a range of values.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/switch.html">Switch</a></h3>
|
||||
<p>Renders a boolean input.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## List Views
|
||||
|
||||
Unlike the more generic `ScrollView`, the following list view components only render elements that are currently showing on the screen. This makes them a great choice for displaying long lists of data.
|
||||
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<h3><a href="docs/flatlist.html">FlatList</a></h3>
|
||||
<p>A component for rendering performant scrollable lists.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/sectionlist.html">SectionList</a></h3>
|
||||
<p>Like <code>FlatList</code>, but for sectioned lists.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## iOS Components and APIs
|
||||
|
||||
Many of the following components provide wrappers for commonly used UIKit classes.
|
||||
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<h3><a href="docs/actionsheetios.html">ActionSheetIOS</a></h3>
|
||||
<p>API to display an iOS action sheet or share sheet.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/adsupportios.html">AdSupportIOS</a></h3>
|
||||
<p>API to access the "advertising identifier" on iOS.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/alertios.html">AlertIOS</a></h3>
|
||||
<p>Create an iOS alert dialog with a message or create a prompt for user input.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/datepickerios.html">DatePickerIOS</a></h3>
|
||||
<p>Renders a date/time picker (selector) on iOS.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/imagepickerios.html">ImagePickerIOS</a></h3>
|
||||
<p>Renders a image picker on iOS.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/navigatorios.html">NavigatorIOS</a></h3>
|
||||
<p>A wrapper around <code>UINavigationController</code>, enabling you to implement a navigation stack.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/progressviewios.html">ProgressViewIOS</a></h3>
|
||||
<p>Renders a <code>UIProgressView</a></code> on iOS.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/pushnotificationios.html">PushNotificationIOS</a></h3>
|
||||
<p>Handle push notifications for your app, including permission handling and icon badge number.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/segmentedcontrolios.html">SegmentedControlIOS</a></h3>
|
||||
<p>Renders a <code>UISegmentedControl</code> on iOS.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/tabbarios.html">TabBarIOS</a></h3>
|
||||
<p>Renders a <code>UITabViewController</code> on iOS. Use with <a href="docs/tabbarios-item.html">TabBarIOS.Item</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Android Components and APIs
|
||||
|
||||
Many of the following components provide wrappers for commonly used Android classes.
|
||||
|
||||
<div class="component-grid component-grid-border">
|
||||
<div class="component">
|
||||
<h3><a href="docs/backhandler.html">BackHandler</a></h3>
|
||||
<p>Detect hardware button presses for back navigation.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/datepickerandroid.html">DatePickerAndroid</a></h3>
|
||||
<p>Opens the standard Android date picker dialog.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/drawerlayoutandroid.html">DrawerLayoutAndroid</a></h3>
|
||||
<p>Renders a <code>DrawerLayout</code> on Android.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/permissionsandroid.html">PermissionsAndroid</a></h3>
|
||||
<p>Provides access to the permissions model introduced in Android M.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/progressbarandroid.html">ProgressBarAndroid</a></h3>
|
||||
<p>Renders a <code>ProgressBar</code> on Android.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/timepickerandroid.html">TimePickerAndroid</a></h3>
|
||||
<p>Opens the standard Android time picker dialog.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/toastandroid.html">ToastAndroid</a></h3>
|
||||
<p>Create an Android Toast alert.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/toolbarandroid.html">ToolbarAndroid</a></h3>
|
||||
<p>Renders a <code>Toolbar</code> on Android.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/viewpagerandroid.html">ViewPagerAndroid</a></h3>
|
||||
<p>Container that allows to flip left and right between child views.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
## Others
|
||||
|
||||
These components may come in handy for certain applications. For an exhaustive list of components and APIs, check out the sidebar to the left.
|
||||
|
||||
<div class="component-grid">
|
||||
<div class="component">
|
||||
<h3><a href="docs/activityindicator.html">ActivityIndicator</a></h3>
|
||||
<p>Displays a circular loading indicator.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/alert.html">Alert</a></h3>
|
||||
<p>Launches an alert dialog with the specified title and message.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/cameraroll.html">CameraRoll</a></h3>
|
||||
<p>Provides access to the local camera roll / gallery.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/clipboard.html">Clipboard</a></h3>
|
||||
<p>Provides an interface for setting and getting content from the clipboard on both iOS and Android.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/dimensions.html">Dimensions</a></h3>
|
||||
<p>Provides an interface for getting device dimensions.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/keyboardavoidingview.html">KeyboardAvoidingView</a></h3>
|
||||
<p>Provides a view that moves out of the way of the virtual keyboard automatically.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/linking.html">Linking</a></h3>
|
||||
<p>Provides a general interface to interact with both incoming and outgoing app links.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/modal.html">Modal</a></h3>
|
||||
<p>Provides a simple way to present content above an enclosing view.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/pixelratio.html">PixelRatio</a></h3>
|
||||
<p>Provides access to the device pixel density.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/refreshcontrol.html">RefreshControl</a></h3>
|
||||
<p>This component is used inside a <code>ScrollView</code> to add pull to refresh functionality.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/statusbar.html">StatusBar</a></h3>
|
||||
<p>Component to control the app status bar.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/stylesheet.html">StyleSheet</a></h3>
|
||||
<p>Provides an abstraction layer similar to CSS stylesheets.</p>
|
||||
</div>
|
||||
<div class="component">
|
||||
<h3><a href="docs/webview.html">WebView</a></h3>
|
||||
<p>A component that renders web content in a native view.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -5,7 +5,7 @@ layout: docs
|
|||
category: Guides
|
||||
permalink: docs/handling-touches.html
|
||||
next: animations
|
||||
previous: more-resources
|
||||
previous: components
|
||||
---
|
||||
|
||||
Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: More Resources
|
|||
layout: docs
|
||||
category: The Basics
|
||||
permalink: docs/more-resources.html
|
||||
next: handling-touches
|
||||
next: components
|
||||
previous: networking
|
||||
---
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ If you're using React Native, you probably already know about [React](https://fa
|
|||
|
||||
One common question is how to handle the "state" of your React Native application. The most popular library for this is [Redux](http://redux.js.org/). Don't be afraid of how often Redux uses the word "reducer" - it's a pretty simple library, and there's also a nice [series of videos](https://egghead.io/courses/getting-started-with-redux) explaining it.
|
||||
|
||||
If you're looking for a library that does a specific thing, check out [Awesome React Native](https://github.com/jondot/awesome-react-native), a curated list of components that also has demos, articles, and other stuff.
|
||||
If you're looking for a library that does a specific thing, check out [Awesome React Native](http://www.awesome-react-native.com/), a curated list of components that also has demos, articles, and other stuff.
|
||||
|
||||
## Example Apps
|
||||
|
||||
|
|
|
|||
|
|
@ -1699,6 +1699,51 @@ input#algolia-doc-search:focus {
|
|||
.buttons-unit.downloads {
|
||||
margin: 30px 0; }
|
||||
|
||||
.component-grid {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.component {
|
||||
border: 1px solid #05A5D1;
|
||||
border-radius: 3px;
|
||||
margin: 0 auto 10px;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.component h3 {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
background-color: #05A5D1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.component h3 a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.component p {
|
||||
padding: 10px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width: 768px) {
|
||||
.component-grid {
|
||||
width: 768px;
|
||||
}
|
||||
.component-grid.component-grid-border {
|
||||
border-bottom: 1px solid #f1eff0;
|
||||
}
|
||||
.component {
|
||||
width: 30%;
|
||||
height: 150px;
|
||||
margin: 0 22px 22px auto;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
/** Showcase **/
|
||||
.home-showcase-section {
|
||||
max-width: 800px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue