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

Files

Nicolas Gallagher 3026465ae3 Monorepo

Introduces a monorepo structure, relies on yarn workspaces to share
dependencies, and lerna for syncing versions across the monorepo.

* Create 2 workspaces:
    'packages' and 'website'
* Create 2 public packages:
    'babel-plugin-react-native-web' and 'react-native-web'
* Create 1 private package:
    'benchmarks'

A simple release script runs the tests, builds the package assets,
increments the package version numbers, git commits and tags, publishes
the package to npm, pushes the changes to github, and releases the
website update.

Close #657

2017-12-24 12:33:41 +00:00

3.6 KiB

Raw Blame History

React Native for Web

"React Native for Web" brings the platform-agnostic Components and APIs of React Native to the Web.

Browse the interactive documentation or try it out on Glitch.

Features

Interoperability with ReactDOM components.
Native-like touch handling.
Built-in integration with web accessibility APIs.
Built-in support for LTR and RTL layouts.
Built-in expressive and reliable subset of CSS.
Optimized, vendor-prefixed CSS with good runtime performance.
Server-side rendering of HTML and critical CSS.
Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.

Quick start

Install in your existing app using yarn or npm:

yarn add react react-dom react-native-web
yarn add --dev babel-plugin-react-native-web

Add the react-native-web plugin to your Babel configuration. This will alias react-native to react-native-web and exclude any modules not required by the app.

{
  "presets": [
    "react-native"
  ],
  "plugins": [
    "react-native-web"
  ]
}

(For React/ReactDOM 15.4 – 15.6 support, install react-native-web@<0.1.0)

See the Getting Started guide for more details.

Documentation

The interactive documentation shows all the supported APIs and Components.

Guides:

Example code

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

// Components
const Card = ({ children }) => <View style={styles.card}>{children}</View>
const Title = ({ children }) => <Text style={styles.title}>{children}</Text>
const Photo = ({ uri }) => <Image source={{ uri }} style={styles.image} />
const App = () => (
  <Card>
    <Title>App Card</Title>
    <Photo uri="/some-photo.jpg" />
  </Card>
)

// Styles
const styles = StyleSheet.create({
  card: {
    flexGrow: 1,
    justifyContent: 'center'
  },
  title: {
    fontSize: '1.25rem',
    fontWeight: 'bold'
  },
  image: {
    height: 40,
    marginVertical: 10,
    width: 40
  }
})

// App registration and rendering
AppRegistry.registerComponent('MyApp', () => App)
AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-root') })

Starter kits

License

React Native for Web is BSD licensed.

3.6 KiB Raw Blame History Unescape Escape