React Native: высота WebView не установлена ​​должным образом

Question

У меня проблема с WebView в приложении React Native. Если высота 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

Попробуйте добавить flex стиль WebView. Ваш код будет выглядеть так:

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

Answer 3

Возможно, что невидимый вид из вашей функции рендеринга рисуется в нижней половине экрана. Не видя остальной части метода рендеринга, я не мог сказать, все еще стоит проверить.