React Native：WebView高度设置不正确

Question

I'm having a problem with a WebView in my React Native app. When no height for the WebView is specified, it defaults to about half the screen height (iPhone 6S). However, when I set a height with the help of Dimensions , it displays fine, but only the original half is interactive – ie. can only scroll using the top half of the screen.

Here are the main parts of my current code:

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);

I look forward to any help that can be offered :)

Answer 1

Try adding flex style to WebView . Your code will look like this:

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

Answer 2

It's possible that an invisible view from your render function is being drawn on the bottom half of the screen. With out seeing the rest of the render method I couldn't tell, still worth checking.

Answer 3

Thanks for the answers, guys. I've fixed my issue now, and it seems to be such an easy fix. I basically wrapped the WebView in it's own View container. I'm not sure whether it wasn't working because it had sibling elements (ie. NavBar and TabBarIOS – which I left off my previous snippet – sorry!) , but the WebView now works great.

Here is my new render function:

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