打開lightBox后如何增加圖像寬度？

Question

我正在為圖像查看器使用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"
  }
});

Answer 1

燈箱有屬性稱為（ activeProps ）。 要使圖像全屏，只需刪除style={{ flex: 1 }} 。 並添加該屬性。 像這樣設置它的值：

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

作為參考檢查這個： https : //github.com/oblador/react-native-lightbox

Answer 2

您需要為圖像的外部容器設置大小，並為圖像提供 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>