react-native-lightbox

> 编程语言

开源

React Native 的全屏灯箱弹出窗口中的图片等

2.8K stars0 点赞1 次浏览

访问官网 GitHub

工具介绍

React Native 的全屏灯箱弹出窗口中的图片等

React-native-lightbox

安装

bash

yarn add react-native-lightbox

用法

navigator 属性是可选的，但在 iOS 上建议使用，请参阅下一节了解 Navigator 配置。

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 设置/Android 支持

为了支持 Android，你必须传入一个 Navigator 的引用，因为 Android 尚不支持 Modal 组件，且该组件不在官方待办事项列表中。请参阅 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,
    }}
  />
);

属性

属性	类型	描述
`activeProps`	`object`	可选属性集，应用于灯箱模式下的内容组件。可用于应用自定义样式或更高分辨率的图像源。
`renderHeader(close)`	`function`	自定义头部，替代默认的带 X 按钮的头部
`renderContent`	`function`	自定义灯箱内容，替代默认的子内容
`willClose`	`function`	在灯箱关闭前触发
`onClose`	`function`	在灯箱关闭时触发
`onOpen`	`function`	在灯箱打开时触发
`didOpen`	`function`	在灯箱打开后触发
`underlayColor`	`string`	可触摸背景的颜色，默认为 `black`
`backgroundColor`	`string`	灯箱背景的颜色，默认为 `black`
`swipeToDismiss`	`bool`	启用通过向上或向下滑动来关闭全屏模式的手势，默认为 `true`。
`springConfig`	`object`	`Animated.spring` 配置，默认为 `{ ten`