我如何在 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 child如何组件工作 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>

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

How i can using web view and one View inside ScrollView @shoutem/ui

react-native

shoutem