0

我有一个 React Native Carousel 组件，我试图在其中激活 Modals。我主要 [从文档中执行此操作][1] 和一些教程，但我用于设置 CardItems 的模型是const（Hooks？）；我有点卡在如何设置状态以获取弹出附加卡数据的模式；当我尝试在 CardItem 中设置状态时，出现“未定义状态”错误，但我认为它也必须在映射数据集中设置。

const [modalVisible, setModalVisible] = useState(false);; 获取 //ReferenceError: useState 未定义

有没有人对此有所了解？我认为这对于更熟悉 Native 环境的人来说可能是非常明显的，但我主要从这个文档中工作。

CardItem.js

import { View, Text, Modal, Pressable, StyleSheet, Dimensions, Image } from "react-native"

export const SLIDER_WIDTH = Dimensions.get('window').width + 80
export const ITEM_WIDTH = Math.round(SLIDER_WIDTH * 0.425)

const CardItem = ({ item, index }) => {
    const [modalVisible, setModalVisible] = useState(false);//ReferenceError: useState is not defined

  return (
    <View style={styles.container} key={index}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert("Modal has been closed.");
          setModalVisible(!modalVisible);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello World!</Text>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => this.setModalVisible(!modalVisible)}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </Pressable>
          </View>
        </View>
      <Image
        source={{ uri: item.src }}
        style={styles.image}
      />
      <Text style={styles.header}>{item.name}</Text>
      <Pressable
          style={[styles.button, styles.buttonOpen]}
          onPress={() => this.setModalVisible(true)}
        >
          <Text style={styles.textStyle}>Show Modal</Text>
      </Pressable>
     </Modal>
    </View>
  )
}

 #....stylesheet (blended own app and docs), export default CardItem

CarouselCards.js

import { View } from "react-native"
import Carousel from 'react-native-snap-carousel'
import CardItem, { SLIDER_WIDTH, ITEM_WIDTH } from './CardItem'
import { cardData } from '../data'

const CarouselCards = () => {
  const isCarousel = React.useRef(null)
  return (
    <View>
      <Carousel
        layout="default"
        layoutCardOffset={9}
        ref={isCarousel}
        data={cardData}
        renderItem={CardItem}
        sliderWidth={SLIDER_WIDTH}
        itemWidth={ITEM_WIDTH}
        inactiveSlideShift={0}
        useScrollView={true}
        onSnapToItem={(index) => setIndex(index)}
      />     
    </View>
  )
}

export default CarouselCards


  [1]: https://reactnative.dev/docs/modal
4

0 回答 0