react-native-lightbox

> 编程语言

Open source

Images etc in Full Screen Lightbox Popovers for React Native

2.8K stars0 likes1 views

Website GitHub

About

Images etc in Full Screen Lightbox Popovers for React Native

react-native-lightbox

Installation

bash

yarn add react-native-lightbox

Usage

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

javascript

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.

javascript

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 }`.