Как заблокировать касания всего экрана, когда индикатор активности отображается в React Native?

Question

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

Answer 1

Для этого нужно сделать оверлей и добавить pointerEvents="none" к нему, как указано здесь .

Styles

spinner: {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        justifyContent: 'center',
        backgroundColor: '#f3f3f3'
    }

Использование

{loading && <View style={styles.spinner} pointerEvents={'none'}>
        <ActivityIndicator/>
    </View>
}

где loading - ваш условный чек.

Answer 2

Для блокировки касаний всего вида я использую https://facebook.github.io/react-native/docs/view.html#pointerevents Однако вам может потребоваться больше узнать о действиях на панели навигации, таких как «назад» и «назад» оборудования.