中文 ![npm version](https://camo.githubusercontent.com/631f08f90548f0597e98200ca8dc8b1594c88bec075d7ea85d893a29fc81691d/68747470733a2f2f62616467652e667572792e696f2f6a732f72656163742d7765622e737667)
React Web A framework for building web apps with React Native compatible API.
Examples
Web Examples
Open with mobile device or emulate mobile in developer tools
Example Source
Adding web to an existing React Native project
If you already have a React Native project and want to add web support, you need to execute the following commands in your existing project directory:
- Install
npm install react-web-cli -g
- Execute
react-web init <ExistedProjectDir>
. That installreact-web
anddevDependencies
to your project and make aweb
directory withwebpack.config.js
file under your project - Register your app into a web platform. To do so, add the code from Fix platform differences. 2. Should run application on web platform to your index.ios.js file
- Execute
npm start
- Execute
react-web start
that starts the web dev server - Execute
react-web bundle
that builds the output
Getting Started
Install
npm install react-web --save
Add Webpack configuration
Inside your webpack configuration, alias the react-native
package to the react-web
package, then install and add haste-resolver-webpack-plugin plugin.
// webpack.config.js
var HasteResolverPlugin = require('haste-resolver-webpack-plugin');
module.exports = {
resolve: {
alias: {
'react-native': 'react-web'
}
},
plugins: [
new HasteResolverPlugin({
platform: 'web',
nodeModules: ['react-web']
})
]
}
See more detail of the
webpack.config.js
from React Native Web Example
What does HasteResolverPlugin do?
When using components of react-web
, just require('ReactActivityIndicator')
, and Webpack will build a bundle with ActivityIndicator.web.js
for web platform.
HasteResolverPlugin
will do the following for you:
- Walk over all components and check out the
@providesModule
info. - When webpack build bundle, it makes your components recognised rather than throwing an error.
- It will help webpack build bundle with correct file depending on the tar* platform.
You can find something like @providesModule ReactActivityIndicator
on react-web
component's comment, yes, it's for HasteResolverPlugin
.
Require modules
The CommonJS way
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
View,
Platform,
} = React;
This reference method looks like we're in the way of using the native react-native way:
Like the require module in Node.js, and through Destructuring assignment, allows some components to be referenced in the scope of the current file.
But in fact it is quite different in React Web.
When require('react-native')
, in the construction of the webpack will be renamed, equivalent to require('react-web')
.
At the same time, this form of writing will put all the components into at one time, including ReactAppRegistry
ReactView
and so on, even some components the you did not use.
The Haste way
var AppRegistry = require('ReactAppRegistry');
var View = require('ReactView');
var Text = require('ReactText');
var Platform = require('ReactPlatform');
In this way, we load our components on demand, such as ReactAppRegistry
or ReactView
and so on.
Packaged components so that we no longer need to care about the differences between the platform.
As mentioned above, the HasteResolverPlugin plugin will help webpack to compile and package the code.
Fix platform differences
- Native events without direct pageX/pageY on web platform
if (Platform.OS == 'web') {
var touch = event.nativeEvent.changedTouches[0];
pageX = touch.pageX;
pageY = touch.pageY;
} else {
startX = event.nativeEvent.pageX;
startY = event.nativeEvent.pageY;
}
- Should run application on web platform
AppRegistry.registerComponent('Game2048', () => Game2048);
if(Platform.OS == 'web'){
var app = document.createElement('div');
document.body.appendChild(app);
AppRegistry.runApplication('Game2048', {
rootTag: app
})
}
- Should care about fetch domain on web platform
var fetch = Platform.OS === 'web'? require('ReactJsonp'): require('ReactFetch');
- Without some APIs like
LayoutAnimation
on web platform
var LayoutAnimation = require('ReactLayoutAnimation')
if(Platform.OS !== 'web'){
LayoutAnimation.configureNext(...)
}
React Native compatible
Components
- ActivityIndicatorIOS - ReactActivityIndicator
- DatePickerIOS - ReactDatePicker TODO
- DrawerLayoutAndroid - ReactDrawerLayout
- Image - ReactImage
- ListView - ReactListView
- Modal - ReactModal
- Navigator - ReactNavigator
- PickerIOS ReactPicker
- ProgressViewIOS - ReactProgressView
- ScrollView - ReactScrollView
- SegmentedControlIOS - ReactSegmentedControl
- SliderIOS - ReactSlider
- Switch - ReactSwitch
- SwitchAndroid - ReactSwitch
- SwitchIOS - ReactSwitch
- TabBarIOS - ReactTabBar
- Text - ReactText
- TextInput - ReactTextInput
- ToastAndroid - ReactToast
- Touchable - ReactTouchable
- TouchableHighlight - ReactTouchableHighlight
- TouchableOpacity - ReactTouchableOpacity
- TouchableWithoutFeedback - ReactTouchableWithoutFeedback
- View - ReactView
- ViewPagerAndroid - ReactViewPager
APIs
- Alert - ReactAlert
- AlertIOS - ReactAlert
- Animated - ReactAnimated
- AppRegistry - ReactAppRegistry
- AsyncStorage - ReactAsyncStorage
- Dimensions - ReactDimensions
- Easing - ReactEasing
- InteractionManager - ReactInteractionManager
- PanResponder - ReactPanResponder
- PixelRatio - ReactPixelRatio
- StyleSheet - ReactStyleSheet
Plugins
- NativeModules - ReactNativeModules
- Platform - ReactPlatform
- processColor - ReactProcessColor
Scripts
- Linting - npm run lint - Must run it before commit.
- Testing - npm test - Run unit testing by jest.
- Developing - npm start - This will run a server at localhost:3000 and use Hot Module Reloading.
- Demo deployment - npm run demo - Generate demo assets under pages directory.
License
React Web is BSD licensed.