Touch не работает в альбомной ориентации реакции-native-веб-просмотра - PullRequest
Новая
       61

Touch не работает в альбомной ориентации реакции-native-веб-просмотра

0 голосов
/ 07 апреля 2020

Я использую act-native-webview для загрузки URL в webview. Для первой загрузки он отлично работает как с ориентацией, т.е. с пейзажем и портретом. Но когда я переключаюсь из портретного в ландшафтный режим и наоборот, касание не работает для некоторой области.

Кратко объяснено

Я тестирую на устройстве iPhone 7 Итак, в портретном режиме ширина и высота экрана составляют 375 и 667 соответственно. Когда я переключаю ориентацию из портретного в ландшафтный режим, ширина и высота экрана становятся 667 и 375 соответственно. Ширина веб-просмотра должна составить 667 из 375 (вы можете видеть, что стиль в коде, ширина и высота установлены равными ширине и высоте экрана соответственно), а ширина взята 667, что идеально, но область касания не работает с 376 до 667.

Вот мой код: 

const isPortrait = () => {
    const dim = Dimensions.get('screen');
    console.log('is_Portrait', dim.height >= dim.width);
    return dim.height >= dim.width;
};

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            url: null,
            deviceToken: '',
            webViewLoaded: false,
            key: 1,
            orientation: isPortrait() ? 'portrait' : 'landscape'
        };

        Dimensions.addEventListener('change', () => {
                this.setState({
                    orientation: isPortrait() ? 'portrait' : 'landscape'
                });
        });
    }

render() {
        const {url, deviceToken, safeArea, orientation} = this.state;
        let screenWidth = Dimensions.get('window').width
        let screenHeight = Dimensions.get('window').height

        return (
                        <WebView
                            style={{width: screenWidth, height: screenHeight, position: 'absolute'}}
                            containerStyle={{width: screenWidth, height: screenHeight}}
                            onError={({nativeEvent}) => {
                                alert('Internet not available, Cross check your internet connectivity and try again')
                            }}
                            source={{uri: url}}
                            />
        );
    }
}
...