mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-01-12 22:51:09 +08:00
dd8a3c8d59
Problem: The default border width should be '0px', but setting a border width value to 'null' would override the default and result in no border width being applied to the element. This could cause unwanted user agent styles to be applied. Solution: createReactDOMStyle now replaces border width values of 'null' with '0px'. Fix #697
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
Add the react-native-web/babel plugin to your Babel configuration. This will
alias react-native to react-native-web and exclude any modules not required
by the app.
{
"plugins": [
"react-native-web/babel"
],
"presets": [
"react-native"
]
}
(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:
- Getting started
- Style
- Accessibility
- Direct manipulation
- Internationalization
- Advanced use
- Known issues
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
Related projects
License
React Native for Web is BSD licensed.