mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-01-12 22:51:09 +08:00

Files

Nicolas Gallagher 8ac84f6da5 [change] StyleSheet: support code-splitting / export smaller API

Quick-fix for code-splitting support by updating the rendered style
sheet in place. Reduce the API to `create`, as the rest is now internal
to the framework.

Fix #34

2015-12-27 11:54:53 +00:00

7.0 KiB

Raw Permalink Blame History

React Native for Web

React Native components and APIs for the Web.

Try it out in the React Native for Web Playground on CodePen.

Install
Example
APIs
Components
Styling
Accessibility
Contributing
Thanks
License

Install

npm install --save react react-dom react-native-web

Example

React Native for Web exports its components, a reference to the react installation, and the react-dom methods (customized for Web). Styles are defined with, and used as JavaScript objects.

Component:

import React, { Image, StyleSheet, Text, View } from 'react-native-web'

const Title = ({ children }) => <Text style={styles.title}>{children}</Text>

const Summary = ({ children }) => (
  <View style={styles.text}>
    <Text style={styles.subtitle}>{children}</Text>
  </View>
)

class App extends React.Component {
  render() {
    return (
      <View style={styles.row}>
        <Image
          source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }}
          style={styles.image}
        />
        <Title>React Native Web</Title>
        <Summary>Build high quality web apps using React</Summary>
      </View>
    )
  },
})

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    margin: 40
  },
  image: {
    height: 40,
    marginRight: 10,
    width: 40,
  },
  text: {
    flexGrow: 1,
    justifyContent: 'center'
  },
  title: {
    fontSize: '1.25rem',
    fontWeight: 'bold'
  },
  subtitle: {
    fontSize: '1rem'
  }
})

Pre-rendering on the server automatically includes your app styles:

// server.js
import App from './components/App'
import React from 'react-native-web'

const html = React.renderToString(<App />);

const Html = () => (
  <html>
    <head>
      <meta charSet="utf-8" />
      <meta content="initial-scale=1,width=device-width" name="viewport" />
    </head>
    <body>
      <div id="react-root" dangerouslySetInnerHTML={{ __html: html }} />
    </body>
  </html>
)

Rendering on the client automatically includes your app styles and supports progressive app loading (i.e. code-splitting / lazy bundle loading):

// client.js
import App from './components/App'
import React from 'react-native-web'

React.render(<App />, document.getElementById('react-root'))

APIs

`StyleSheet`

StyleSheet is a style abstraction that transforms inline styles to CSS on the client or the server. It provides a minimal CSS reset targeting elements and pseudo-elements beyond the reach of React inline styles.

Components

`Image`

An accessibile image component with support for image resizing, default image, and child content.

`ListView`

(TODO)

`ScrollView`

A scrollable view with event throttling.

`Text`

Displays text inline and supports basic press handling.

`TextInput`

Accessible single- and multi-line text input via a keyboard.

`Touchable`

Touch bindings for press and long press.

`View`

The fundamental UI building block using flexbox for layout.

Styling

React Native for Web relies on styles being defined in JavaScript. Styling components can be achieved with inline styles or the use of StyleSheet.

The View component makes it easy to build common layouts with flexbox, such as stacked and nested boxes with margin and padding. See this guide to flexbox.

Media Queries, pseudo-classes, and pseudo-elements

Changing styles and/or the render tree in response to device adaptation can be controlled in JavaScript, e.g., react-media-queries, media-query-fascade, or react-responsive. This has the benefit of co-locating breakpoint-specific DOM and style changes.

Pseudo-classes like :hover and :focus can be implemented with the onHover and onFocus events.

Pseudo-elements are not supported; elements can be used instead.

Accessibility

On the Web, assistive technologies derive useful information about the structure, purpose, and interactivity of apps from their HTML elements, attributes, and ARIA in HTML.

The most common and best supported accessibility features of the Web are exposed as the props: accessible, accessibilityLabel, accessibilityLiveRegion, and accessibilityRole.

React Native for Web does not provide a way to directly control the rendered HTML element. The accessibilityRole prop is used to infer an analogous HTML element to use in addition, where possible. While this may contradict some ARIA recommendations, it also helps avoid certain HTML5 conformance errors and accessibility anti-patterns (e.g., giving a heading role to a button element).

For example:

<View accessibilityRole='article' /> => <article role='article' />.
<View accessibilityRole='banner' /> => <header role='banner' />.
<View accessibilityRole='button' /> => <button type='button' role='button' />.
<Text accessibilityRole='link' href='/' /> => <a role='link' href='/' />.
<View accessibilityRole='main' /> => <main role='main' />.

See the component documentation for more details.

Contributing

Please read the contribution guidelines. Contributions are welcome!

Thanks

Thanks to current and past members of the React and React Native teams (in particular Vjeux and Pete Hunt).

Thanks to react-tappable for backing the current implementation of Touchable.

7.0 KiB Raw Permalink Blame History