Блог

Главная - Вопросы по программированию - Реагирующий родной жест проходит через вид спереди к виду сзади

Реагирующий родной жест проходит через вид спереди к виду сзади

#javascript #react-native

Вопрос:

Я пытаюсь создать собственное приложение react, в котором у меня есть два представления. Один из них находится над видом сзади ( absolute ).

Я использую onStartShouldSetResponder для обнаружения щелчка за пределами вида спереди, и я хочу скрыть состояние входа в систему. Но жест проходит через вид спереди к виду сзади. Это означает, что щелчок login_component(ниже) также передается в login_container(ниже) и скрывает представление.

Вот мой код,

  <View onStartShouldSetResponder={() => true}
       onResponderRelease={() => this.setState({ showLogin: false })}
       style={styles.login_container}
          >
    <View onStartShouldSetResponder={() => false}
          style={styles.login_component}
    >
      <Text>Join a room</Text>
    </View>
</View>

Вот мой код стиля,

 const styles = StyleSheet.create({
  login_component: {
    justifyContent: "center",
    alignItems: "center",
    height: 200,
    width: 300,
    backgroundColor: "#F5FCFF",
    margin: "auto",
    borderRadius: 15,
  },
 login_container: {
    position: "absolute",
    height: "100%",
    width: "100%",
    backgroundColor: "rgba(0,0,0,0.7)",
    justifyContent: "center",
    alignItems: "center",
  },
});

Есть идеи, как это исправить?

Вот предварительный просмотр того, что я делаю — https://i.imgur.com/KAhFAXX.png

Любое альтернативное решение также приветствуется.

Спасибо

Комментарии:

1. Вы пробовали модифицировать zIndex? Может быть, это более простое решение, если оно сработает.

2. Хорошо, ничего себе, не пробовал, спасибо, вы хотели бы добавить свой ответ ниже? Это поможет и другим тоже.

3. Конечно, я также немного доработал ответ. Рад быть вам полезным!

Ответ №1:

Вы можете попробовать установить высокое свойство CSS «zIndex» для элемента JSX, который вы хотите щелкнуть. Более высокий индекс будет гарантировать, что элемент расположен выше элемента с более низким индексом.

В вашем случае вы хотите, чтобы ваш «логин_компонент» был поверх «логин_контейнера». Таким образом, ваш JSX может быть изменен следующим образом (не протестирован):

 <View style={{...styles.login_container, zIndex: 99}}> // Lower zIndex (Below)
    <View style={{...styles.login_component, zIndex: 999}}> // Higher zIndex (Above)
      <Text>Join a room</Text>
    </View>
</View>

Обычно вам не нужно было бы беспокоиться о настройке zIndex самостоятельно, но я предполагаю, что свойство «позиция:» абсолютная «» повлияло на поведение по умолчанию.

Ответ №2:

Наконец я получил решение, которое было просто просто использовать stopPropagation на login_component .

Окончательный код,

  <View onStartShouldSetResponder={() => true}
       onResponderRelease={() => this.setState({ showLogin: false })}
       style={styles.login_container}
          >
    <View onStartShouldSetResponder={(e) => e.stopPropagation()}
          style={styles.login_component}
    >
      <Text>Join a room</Text>
    </View>
</View>
Метки: