mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-05-13 02:02:18 +08:00
092d5d12f7
Problem: Numeric values are suffixed with 'px', unless the property supports unitless values. However, vendor prefixed properties were ignored resulting in invalid CSS values for properties like '-webkit-flex-shrink'. Solution: Apply the upstream solution from React, which includes vendor prefixed properties in the "unitless number" map. Also build a custom vendor prefixer to ensure adequate browser support (i.e., Safari 7 and older Chrome).
React Native for Web
React Native components and APIs for the Web.
Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.
Overview
"React Native for Web" is a project to bring React Native's building blocks and touch handling to the Web.
Browse the UI Explorer to see React Native examples running on Web. Or remix the React Native for Web: Playground on Glitch.
Quick start
To install in your app:
npm install --save react@15.6 react-dom@15.6 react-native-web
NOTE: React Native for Web supports React/ReactDOM 15.4, 15.5, or 15.6.
Then read the Getting Started guide.
Documentation
The UI Explorer interactively documents all the 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') })
Related projects
Start kits
License
React Native for Web is BSD licensed.