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高度設置不正確

回答

相關問題