React Native：WebView高度设置不正确

我在React Native应用程序中遇到WebView问题。如果未指定WebView的高度，则默认为屏幕高度的大约一半（iPhone 6S）。但是，当我在Dimensions的帮助下设置高度时，它显示正常，但只有原来的一半是交互式的 - 即。只能使用屏幕的上半部分进行滚动。React Native：WebView高度设置不正确

这里是我当前的代码的主要部分：

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

我期待着可以提供:)

来源

2016-09-30 SixtySticks

感谢您的回答，伙计们。我已经解决了我的问题，似乎是一个这样简单的修复。我基本上将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> 
    ); 
}

来源

2016-09-30 15:39:29 SixtySticks

尝试增加flex风格WebView任何帮助。您的代码如下所示：

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

来源

2016-09-30 15:05:54 leo7r

您的渲染函数的不可见视图可能会在屏幕的下半部分绘制。由于看不到其他的渲染方法，我不知道，仍然值得检查。

来源

2016-09-30 15:08:01

React Native：WebView高度设置不正确

回答

相关问题