React Native : WebView 높이가 제대로 설정되지 않았습니다.

Question

React Native 앱에서 WebView에 문제가 있습니다. WebView의 높이를 지정하지 않으면 화면 높이의 절반 (iPhone 6S)으로 기본 설정됩니다. 그러나, 내가 Dimensions의 도움으로 높이를 설정하면 괜찮아 보이지만 원래 절반 만 상호 작용합니다. 화면의 위쪽 절반 만 사용하여 스크롤 할 수 있습니다. 여기

내 현재 코드의 주요 부분은 다음과 같습니다

import React, { Component } from 'react'; 
import { 
    ... 
    Dimensions, 
    ... 
    WebView, 
} from 'react-native'; 

let ScreenHeight = Dimensions.get("window").height; 
let ScreenWidth = Dimensions.get("window").width; 

class App extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     ... 
     <WebView 
      source={{uri: 'http://foo.com'}} 
      style={{height: ScreenHeight, width: ScreenWidth}} 
     /> 
     ... 
     </View> 
    ); 
    } 
} 

... 

const styles = StyleSheet.create({ 
    container: { 
    backgroundColor: '#bbb', 
    flex: 1, 
    }, 
    ... 
}); 

AppRegistry.registerComponent('myApp',() => App); 

내가 제공 할 수 있습니다 :

이

Answer 1

답변 해 주셔서 감사합니다. 지금 내 문제를 해결했으며 쉽게 해결할 수 있습니다. 나는 기본적으로 WebView을 자신의 View 컨테이너에 포장했다. 그것은 동사 요소 (예 : NavBar 및 TabBarIOS - 내가 이전 스 니펫을 유감스럽게 생각해서 남겨 두었 기 때문에)이 작동하지 않았는지 확실하지 않습니다., 그러나 WebView은 훌륭하게 작동합니다.

render() { 
    return (
     <View style={styles.container}> 
     <NavBar> 
     <View> 
      <WebView 
       source={{uri: 'http://foo.com'}} 
       style={{height: ScreenHeight, width: ScreenWidth}} 
      /> 
     </View> 
     <TabBarIOS> 
      ... 
     </TabBarIOS> 
     </View> 
    ); 
} 

: 여기

나의 새로운 렌더링 기능입니다

Answer 2

시도가 WebView에 flex 스타일을 추가하는 어떤 도움을 기대합니다. 귀하의 코드는 다음과 같습니다 :

<View style={styles.container}> 
    ... 
    <WebView 
     source={{uri: 'http://foo.com'}} 
     style={{flex:1}} 
    /> 
    ... 
</View> 

Answer 3

렌더 함수의 보이지 않는 뷰가 화면의 아래쪽 절반에 그려지는 것은 가능할 수 있습니다. 렌더링 메서드의 나머지 부분을 보면서 확인할 수는 없지만 여전히 확인할 가치가 있습니다.