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

Question

我尝试在我的项目中使用@shoutem/ui！我有一个带有 Webview 的组件和一个内部视图！我想把它设计成这样：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 子组件如何工作的更详细说明。

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>