mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-06-13 17:46:04 +08:00
88f5dedffd
Port and rewrite "Pressability" from React Native as "PressResponder". This integrates a press target with the responder system on web. It avoids performing layout measurement during gestures by eschewing React Native's iOS-like UX in favor of expected Web UX: a press target will look pressed until the pointer is released, even if the pointer has moved outside the bounding rect of the target. The PressResponder is used to reimplement the existing Touchables. It's expected that they will eventually be removed in favor of Pressable. Fix #1583 Fix #1564 Fix #1534 Fix #1419 Fix #1219 Fix #1166
babel-plugin-react-native-web
A Babel plugin that will alias react-native to react-native-web and exclude
any modules not required by your app (keeping bundle size down).
Installation
yarn add --dev babel-plugin-react-native-web
Usage
.babelrc
{
"plugins": [
["react-native-web", { commonjs: true }]
]
}
You should configure the plugin to match the module format used by your
bundler. Most modern bundlers will use a package's ES modules by default (i.e.,
if package.json has a module field). But if you need the plugin to rewrite
import paths to point to CommonJS modules, you must set the commonjs option
to true.
Example
NOTE: react-native-web internal paths are not stable and you must not rely
on them. Always use the Babel plugin to optimize your build. What follows is an
example of the rewrite performed by the plugin.
Before
import { StyleSheet, View } from 'react-native';
After
import StyleSheet from 'react-native-web/dist/exports/StyleSheet';
import View from 'react-native-web/dist/exports/View';