2

我有一个显示图像的模态，我正在使用一个图像查看器，它将为我显示图像并缩放等。因为我无法直接控制模态的样式，所以图像查看器提供了一个选项来提供反应元素对于renderHeader，下面是我的代码

class EventDetailsScreen extends Component {

  constructor(props){
    super(props);
    this.state = {
      token: null,
      event: null,
      eventImages: [],
      isModalVisible: false,
      dataFetched: false,
    }
  }

  showModal = (image) => {
    this.setState({
      isModalVisible: true,
      currentImageIndex: image.index
    });
  }

  closeModal = () => {
    this.setState({isModalVisible: false});
  }

  render() {
    return (
      <Container style={{backgroundColor: "#F5F5F5"}}>
        <BackHeaderComponent {...this.props} headerName="Event Details" />
        <Content contentContainerStyle={{
          flex: 1, 
        }}>
          {
            this.state.dataFetched ?
            <EventDetails 
              {...this.state}
              showModal={this.showModal}
              closeModal={this.closeModal}
            />
            :<LoadingIndicatorcomponent />

          }
        </Content>
      </Container>
    );
  }
}


const EventDetails = props => (
  <ScrollView style={styles.eventContainer}>
      <View>
          <Text style={styles.eventName}>{props.event.name}</Text>
          <Text style={styles.eventDetails}>
              {props.event.from_date} - {props.event.to_date}
          </Text>
      </View>
      <View style={styles.imageContainer}>
          {props.eventImages.map(image => (
            <TouchableHighlight onPress={() => props.showModal(image)} key={image.id}>
              <Image 
                  source={{uri: image.url}}
                  style={styles.image}
              />
            </TouchableHighlight>
          ))}
      </View>
      <ImageViewerModal {...props}></ImageViewerModal>
  </ScrollView>
)

class ImageViewerModal extends Component {
  render(){
    return (
      <Modal 
        visible={this.props.isModalVisible}
        transparent={true}
        animationType="slide"
        onRequestClose={() => this.props.closeModal()}>

          <ImageViewer 
            imageUrls={this.props.eventImages}
            index={this.props.currentImageIndex}
            enableImageZoom={true}
            loadingRender={() => (<LoadingIndicatorcomponent />)}
            renderHeader={() => (
              <View style={modalStyles.header}>

                <TouchableOpacity onPress={this.props.closeModal} style={modalStyles.leftHeader}>
                  <MaterialIcon name="close" size={25} color="#fff"></MaterialIcon>
                </TouchableOpacity>

                <TouchableOpacity onPress={() => this.props.closeModal()} style={modalStyles.rightHeader}>
                  <FeatherIcon name="download" size={25} color="#fff"></FeatherIcon>
                </TouchableOpacity>

              </View>
            )}
          >
          </ImageViewer>
      </Modal>
    )
  }
}

当我按下关闭或下载时，什么都没有发生。我也尝试过 TouchableHighlight。

这些是我的风格

const modalStyles = StyleSheet.create({
  header: { 
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  leftHeader: {
    marginTop: 35,
    marginLeft: 25,
    width: 25,
    height: 25,
  },
  rightHeader: {
    marginTop: 35,
    marginRight: 25,
    width: 25,
    height: 25,
  },
})
4

1 回答 1

1

我有同样的问题。检查您的 TouchableOpacity 是从“react-native”模块导入的，而不是从其他任何模块导入的。（我的在 react-native-gesture-handler 中。）

于 2021-05-22T06:27:09.940 回答