繁体   English   中英

打开lightBox后如何增加图像宽度?

[英]How to grow Image width after opening lightBox?

我正在为图像查看器使用react-native-lightbox ,当我打开图像时,我想采用全屏宽度,但它没有这样做; 它在打开之前只需要一个默认宽度。 我使用宽度和高度作为状态,并在打开灯箱时更新值,但这不起作用(它给出了错误“灯箱不工作”。)那么,我如何处理这些图像取全宽和全高?

开张前

打开后

import React, { Component, Fragment } from "react";
import firebase from "react-native-firebase";
import Icon from "react-native-vector-icons/Ionicons";
import Lightbox from "react-native-lightbox";

import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  FlatList,
  ScrollView,
  Dimensions
} from "react-native";
const { width, height } = Dimensions.get("window");
class GalleryScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      images: [],
      widthX: width / 3 - 17,
      heightX: 110,
      flexO: 0
    };
  }
  componentDidMount() {
    const uid = firebase.auth().currentUser.uid;
    firebase
      .database()
      .ref(`providers/${uid}`)
      .on("value", snapshot => {
        let uri = snapshot.val().Images;
        let images = [];
        Object.values(uri).forEach(img => {
          images.push({ uri: img.uri });
        });
        this.setState({ images });
      });
  }
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          numColumns={3}
          key={Math.floor(Math.random() * 1000)}
          data={this.state.images}
          style={{
            alignSelf: "center",
            marginTop: 10,
            marginBottom: 0
          }}
          renderItem={({ item }) => {
            return (
              <TouchableOpacity style={{ margin: 5 }}>
                <Lightbox
                  underlayColor="#fff"
                  style={{ flex: 1 }}
                  backgroundColor="#001"
                >
                  <Image
                    key={Math.floor(Math.random() * 100)}
                    source={{ uri: item.uri }}
                    style={{
                      alignSelf: "center",
                      width: width / 3 - 17,
                      height: 110,
                      borderRadius: 15
                    }}
                    resizeMethod="resize"
                    resizeMode="cover"
                  />
                </Lightbox>
              </TouchableOpacity>
            );
          }}
          keyExtractor={(item, index) => index.toString()}
        />
        <TouchableOpacity
          style={{
            alignItems: "center",
            justifyContent: "center",
            alignSelf: "flex-end",
            width: 70,
            height: 70,
            right: 20,
            bottom: 15,
            borderRadius: 50
            // backgroundColor: "#fff"
          }}
        >
          <Icon name="ios-add-circle" size={70} color="#2F98AE" />
          {/* <Text style={{ fontSize: 40, color: "#fff" }}>+</Text> */}
        </TouchableOpacity>
      </View>
    );
  }
}

export default GalleryScreen;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f1f1f1"
  }
});

灯箱有属性称为( activeProps )。 要使图像全屏,只需删除style={{ flex: 1 }} 并添加该属性。 像这样设置它的值:

activeProps={{width: '100%', height: '100%'}}

作为参考检查这个: https : //github.com/oblador/react-native-lightbox

您需要为图像的外部容器设置大小,并为图像提供 100% 的宽度和高度,以便当灯箱出现时,图像将采用全屏尺寸

<TouchableOpacity 
  key={Math.floor(Math.random() * 100)} 
  style={{ margin: 5, width: width / 3 - 17, height: 110 }}
>
  <Lightbox
    underlayColor="#fff"
    style={{ flex: 1 }}
    backgroundColor="#001"
  >
    <Image
      source={{ uri: item.uri }}
      style={{
        borderRadius: 15,
        width: "100%", 
        height: "100%"
      }}
      resizeMethod="resize"
      resizeMode="cover"
    />
  </Lightbox>
</TouchableOpacity>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM