我已经能够创建画廊,尽管我遵循了教程来实现,但是我更改了一些参数以适合我的需求。图片库显示何时按下按钮,但是我不希望在按钮按下时显示照片,我想实现包含画廊的模式,以便在页面打开时显示。我需要帮助来实现它。...谢谢
选择照片后,我希望所选的照片通过“共享”按钮显示整个屏幕...我一直在尝试实现这一点,但一直遇到错误。谢谢!
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>
)
}
}
答案 0 :(得分:0)
因此,要在打开页面后进行切换,应在“ componentDidMount”中包含“ toggleModal”调用。此方法是组件生命周期的一部分,并且在渲染组件时被调用一次。
我认为最好的方法是在组件状态中添加一个布尔标志,指示是否共享该布尔标志,然后您可以像这样更改照片地图:
this.state.photos.map((p, i) => {
const isSelected = i === this.state.index;
const divide = isSelected && this.share === true ? 1 : 3;
return (
<TouchableHighlight
style={{ opacity: isSelected ? 0.5 : 1 }}
key={i}
underlayColor='transparent'
onPress={() => this.setIndex(i)}
>
<Image
style={{
width: width / divide,
height: width / divide
}}
source={{ uri: p.node.image.uri }}
/>
</TouchableHighlight>
)
})
希望这是您要实现的目标。