Проблемы с открытием модального

#javascript #reactjs #react-native

Вопрос:

У меня возникли некоторые проблемы, пытаясь заставить эту модальную работу работать. У меня есть плоский список с большим количеством данных внутри, и каждый элемент должен быть интерактивным, чтобы открыть модальный. Прямо сейчас, когда я нажимаю на элемент в плоском списке, ничего не происходит. Чего мне не хватает?

………………………………………………………………………………………………………………………………………………………………………………….

 export default function Home() {
const [modalVisible, setModalVisible] = useState(false);

  renderItem = ({ item, index }) => {
    return (
      <View>
        <TouchableOpacity
          style={{
            margin: 15,
            padding: 10,
            borderRadius: 10,
          }}
          onPress={() => getItem(item)}>
          <Text style={{ color: colors.text, fontWeight: '700' }}>
            {item.name}
          </Text>
          <Text style={{ color: colors.text }}>{item.company}</Text>
          <Text style={{ color: colors.text }}>{item.info}</Text>
        </TouchableOpacity>
      </View>
    );
  };

  const getItem = (item) => {
    return (
      <Modal
        hardwareAccelerated={true}
        animationType="slide"
        visible={modalVisible}>
        <View style={{ flex: 1, backgroundColor: '#fff' }}>
          <TouchableOpacity
            onPress={() => {
              setModalVisible(!modalVisible);
            }}></TouchableOpacity>
        </View>
      </Modal>
    );
  };

  return (
    <View style={{ flex: 1, backgroundColor: colors.background }}>
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center',
          padding: 19,
        }}>
        <TextInput
          style={[
            {
              flex: 1,
              backgroundColor: '#fff',
              borderRadius: 10,
              shadowColor: '#888888',
              shadowOffset: { width: 0, height: 1 },
              shadowOpacity: 0.8,
              shadowRadius: 2,
              elevation: 3,
            },
          ]}
          placeholder="Sök"
          placeholderTextColor="#000"
          onChangeText={(text) => setSearch(text)}
          value={search}
        />
      </View>
      <View>
        <FlatList
          data={filteredDataSource}
          keyExtractor={(item, index) => index.toString()}
          initialNumToRender={5}
          showsVerticalScrollIndicator={true}
          renderItem={renderItem}
          style={{ height: 475 }}
        />
      </View>
    </View>
  );
}

1. Вы не устанавливаете modalVisible state

2. @TaghiKhavari не могли бы вы показать код? Я просмотрел документы, но они по-прежнему не открываются. Я попытался использовать это onPress={() => { setModalVisible(true); }}

Ответ №1:

Вы не изменили видимое состояние вашего модального в вашей функции onPress.

В вашей функции onPress для элемента FlatList добавьте setModalVisible(true) перед GetItem(item)

1. пробовал это, но это не работает onPress={() => { setModalVisible(true); GetItem(item); }}

2. О, кроме того, ваш модальный должен быть дочерним элементом основного представления. Поэтому вместо того, чтобы возвращать модальное значение по щелчку, поместите его прямо перед FlatList, поскольку таким образом они оба будут дочерними элементами основного компонента представления. Он должен работать нормально.

3. Поэтому вместо того, чтобы возвращать модальное значение по щелчку, поместите его прямо перед FlatList, поскольку таким образом они оба будут дочерними элементами основного компонента представления. Это была проблема, и теперь она работает.