[英]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.