我如何在ScrollView @ shoutem / ui中使用Web视图和一个View

Question

我尝试在我的项目中使用@ shoutem / ui！ 我有一个带Webview的组件和一个View里面！ 我希望设计它像：Webview全屏，当滚动到结束WebView我想看View，然后我尝试使用ScrollView然后把WebView和View放在里面，这里是我的代码：

  <ScrollView >
          <Screen styleName="paper">
            <WebView
              style={{
                backgroundColor: '#fff',
                flex: 1,
              }}
              ref="myWebView"
              renderLoading={this.renderLoading}
              source={{ uri: this.state.rowdata.urlView }}
            />
          </Screen>

          <View styleName="horizontal space-between h-center" >
            <Button>
              <Icon name="like" />
            </Button>
            <TextInput
              placeholder={'Enter comment..'}
            />
            <Button>
              <Icon name="activity" />
            </Button>
          </View>
        </ScrollView>

但我认为我在某些地方错了！这是我的结果：

请帮我解决这个问题！非常感谢你们

Answer 1

WebView会自动调整自身大小，这意味着它会缩小 如果放在ScrollView组件中，它本身就是虚无。 如果您给它一个特定的大小，WebView将显示正常：

  <ScrollView style={{flex: 1}}>
    <WebView source={src} style={{height: 250}}/>
  </ScrollView>

您可以找到有关ScrollView子项的更详细说明 组件工作here。

Answer 2

只要你能在加载前获得 webview 的高度，这样的事情就可以工作

<ScrollView style={{ height:1000}}>
        <WebView
        style={ { height:700} }
        javaScriptEnabled={true}
            domStorageEnabled={true}
        
            source={{uri:"https://www.facebook.com" }}
            scrollEnabled={false}
        />
        <WebView
        style={ { height:700} }
            javaScriptEnabled={true}
            domStorageEnabled={true}
        
            source={{uri:"https://www.facebook.com" }}
            scrollEnabled={false}
        />
        <View/>
                                    }
                                />
    </ScrollView>