我已经能够创建一个画廊,尽管我遵循了一个教程来实现它,并且我更改了一些参数以适应我想要的。照片库在按下按钮时显示,但我不希望照片在按钮按下时显示,我想实现包含画廊的模式,以便在页面打开后显示。我需要帮助来实现它....谢谢
选择照片后,我希望所选照片使用共享按钮占据整个屏幕......我也一直在尝试实现这一点,但一直遇到错误。谢谢!
toggleModal = () => {
this.setState({ modalVisible: !this.state.modalVisible})
}
share = () => {
const image = this.state.photos[this.state.index].node.image.uri
RNFetchBlob.fs.readFile(image, 'base64')
.then((data) => {
let shareOptions = {
title: "React Native Share Example",
message: "Check out this photo!",
url: `data:image/jpg;base64,${data}`,
subject: "Check out this photo!"
};
Share.open(shareOptions)
.then((res) => console.log('res:', res))
.catch(err => console.log('err', err))
})
}
render() {
console.log('state :', this.state)
return (
<View style={styles.container}>
<Button
title='View Photos'
onPress={() => { this.toggleModal(); this.getPhotos() }}
/>
<Modal
animationType={"slide"}
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => console.log('closed')}
>
<View style={styles.modalContainer}>
<Button
title='Close'
onPress={this.toggleModal}
/>
<ScrollView
contentContainerStyle={styles.scrollView}>
{
this.state.photos.map((p, i) => {
return (
<TouchableHighlight
style={{opacity: i === this.state.index ? 0.5 : 1}}
key={i}
underlayColor='transparent'
onPress={() => this.setIndex(i)}
>
<Image
style={{
width: width/3,
height: width/3
}}
source={{uri: p.node.image.uri}}
/>
</TouchableHighlight>
)
})
}
</ScrollView>
{
this.state.index !== null && (
<View style={styles.shareButton}>
<Button
title='Share'
onPress={this.share}
/>
</View>
)
}
</View>
</Modal>
</View>
)
}
}