开发者社区> 镜像站> NPM> react-native-lightbox
react-native-lightbox
Images etc in Full Screen Lightbox Popovers for React Native
Last updated a year ago by oblador .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-native-lightbox 
SYNC missed versions from official npm registry.

react-native-lightbox

Installation

yarn add react-native-lightbox

Usage

navigator property is optional but recommended on iOS, see next section for Navigator configuration.

import Lightbox from 'react-native-lightbox';

const LightboxView ({ navigator }) => (
  <Lightbox navigator={navigator}>
    <Image
      style={{ height: 300 }}
      source={{ uri: 'http://knittingisawesome.com/wp-content/uploads/2012/12/cat-wearing-a-reindeer-hat1.jpg' }}
    />
  </Lightbox>
);

Navigator setup/Android support

For android support you must pass a reference to a Navigator since it does not yet have the Modal component and is not on the official todo list. See the Example project for a complete example.

const renderScene = (route, navigator) => {
  const Component = route.component;

  return (
    <Component navigator={navigator} route={route} {...route.passProps} />
  );
};

const MyApp = () => (
  <Navigator
    ref="navigator"
    style={{ flex: 1 }}
    renderScene={renderScene}
    initialRoute={{
      component: LightboxView,
    }}
  />
);

Properties

Prop Type Description
activeProps object Optional set of props applied to the content component when in lightbox mode. Usable for applying custom styles or higher resolution image source.
renderHeader(close) function Custom header instead of default with X button
renderContent function Custom lightbox content instead of default child content
willClose function Triggered before lightbox is closed
onClose function Triggered when lightbox is closed
onOpen function Triggered when lightbox is opened
didOpen function Triggered after lightbox is opened
underlayColor string Color of touchable background, defaults to black
backgroundColor string Color of lightbox background, defaults to black
swipeToDismiss bool Enables gestures to dismiss the fullscreen mode by swiping up or down, defaults to true.
springConfig object Animated.spring configuration, defaults to { tension: 30, friction: 7 }.

Demo

Demo

Example

Check full example in the Example folder.

License

MIT License. © Joel Arvidsson

Current Tags

  • 0.8.1                                ...           latest (a year ago)

12 Versions

  • 0.8.1                                ...           a year ago
  • 0.8.0                                ...           2 years ago
  • 0.7.0                                ...           3 years ago
  • 0.6.0                                ...           5 years ago
  • 0.5.1                                ...           5 years ago
  • 0.5.0                                ...           5 years ago
  • 0.4.1                                ...           5 years ago
  • 0.4.0                                ...           5 years ago
  • 0.3.0                                ...           5 years ago
  • 0.2.0                                ...           5 years ago
  • 0.1.1                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 28
This Week 184
This Month 142
Last Day 32
Last Week 194
Last Month 577
Dependencies (1)
Dev Dependencies (0)
None
Dependents (94)