mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-01-12 22:51:09 +08:00
e6811b2134
**Problem** Browsers tend to fire both touch and mouse events when touch is supported. This causes touchables to fire responder callbacks twice. For example, 'TouchableOpacity' will animate the opacity twice in response to a touch. **Response** If a browser supports touch, don't include the mouse events as dependencies of the responder events. This is not ideal, as some devices support both touch and mouse interactions. This will need to be revisited.
React Native for Web
React Native components and APIs for the Web.
Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.
Quick start
To install in your app:
npm install --save react@0.14 react-dom@0.14 react-native-web
Read the Client and Server rendering guide.
Overview
This is a web implementation of React Native components and APIs. The React Native components are good web application building blocks, and provide a common foundation for component libraries.
For example, the View component makes it easy to build
common layouts with flexbox, such as stacked and nested boxes with margin and
padding. And the StyleSheet API converts styles
defined in JavaScript to "atomic" CSS.
Examples
Demos:
Example:
import React, { 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>
)
// App registration and rendering
AppRegistry.registerComponent('MyApp', () => App)
AppRegistry.runApplication('MyApp', { rootTag: document.getElementById('react-root') })
// Styles
const styles = StyleSheet.create({
card: {
flexGrow: 1,
justifyContent: 'center'
},
title: {
fontSize: '1.25rem',
fontWeight: 'bold'
},
image: {
height: 40,
marginVertical: 10,
width: 40
}
})
Documentation
Guides:
Exported modules:
- Components
- APIs
Animated(mirrors React Native)AppRegistryAppStateAsyncStorageDimensionsNativeMethodsNetInfoPanResponder(mirrors React Native)PixelRatioPlatformStyleSheet
License
React Native for Web is BSD licensed.