没有 onPress 调用的图像显示

Question

我已经能够创建一个画廊，虽然我按照教程来实现它并且我更改了一些参数以满足我的需要。照片库会在按下按钮时显示，但我不希望在按下按钮时显示照片，我想实现包含画廊的模态，以便在页面打开后显示。我需要帮助才能实现它....谢谢
When a photo is selected, I want the selected photo to take the entire screen with the share button...I have been trying to achieve that also but keep 运行 into errors .谢谢！

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>
        )
      }
    }

Answer 1

因此，为了在页面打开后进行切换，您应该在“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>
     )
})

希望这是您想要实现的目标。

没有 onPress 调用的图像显示

Image Display without onPress call

javascript

react-native

react-native-android

react-native-modal