Блог

Я составил плоский список с несколькими данными внутри. Я хочу создать всплывающую информацию для каждого элемента в списке. Поэтому я попытался ввести модальное в функцию renderItem, но когда она установит видимое модальное состояние, она отобразит всю информацию в моем плоском списке. Я думаю, что это должно быть настройка модального видимого состояния по идентификатору или что-то в этом роде, но я не знаю, как это сделать. Есть какие-нибудь предложения?

мой объект визуализации:

  function RenderItem({ item }) {
    return (
        <View>
            <Modal
                animationType='slide'
                transparent={true}
                visible={infoModal}>
                <View style={styles.informationContainer}>
                    <View style={styles.informationBox}>
                        <Text>{item.file.displayName}</Text>
                        <Button title='         OK         ' onPress={() => setInfoModal(false)} />

                    </View>
                </View>
            </Modal>
            <TouchableOpacity style={styles.listBox} onPress={() => setInfoModal(true)}>
                <View>
                    <Text numberOfLines={1} style={styles.listText}>{item.file.displayName}</Text>
                    <Text style={{ width: 200, color: 'rgba(0, 0, 0, 0.5)' }}>{item.certificateName}</Text>
                </View>
                <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
                    <TouchableOpacity>
                        <Icon name='search' color='black' size={25} />
                    </TouchableOpacity>
                    <Text>       </Text>
                    <TouchableOpacity onPress={() => handleDownload(item)}>
                        <Icon name='download' color='black' size={25} />
                    </TouchableOpacity>
                    <Text>   </Text>
                </View>
            </TouchableOpacity>
        </View>
    )
}
 

Вместо установки простого логического значения о том Modal , должно ли оно отображаться, вы можете установить какое-то идентифицируемое значение, которое указывает, какой элемент следует загрузить (и в противном случае оставить его undefined ).

Пример с голыми костями:

 
const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

export default function App() {
  const [modalInfo, setModalInfo] = React.useState(undefined);
  
const renderItem = ({ item }) => (
    <TouchableOpacity onPress={() => setModalInfo(item.title)}><Text>{item.title}</Text></TouchableOpacity>
  );

  return (
    <View style={styles.container}>
          <Modal visible={modalInfo !== undefined}>
            <View style={[{borderWidth: 1},styles.centeredView]}>
              <Text>{modalInfo}</Text>
              <TouchableOpacity onPress={() => setModalInfo(undefined)}><Text>Close</Text></TouchableOpacity>
            </View>
          </Modal>
       <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});