Как я могу использовать веб-вид и один вид внутри ScrollView @shoutem/ui

Question

Я пытаюсь использовать @shoutem/ui в моем проекте! у меня есть один компонент с 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

Что-то вроде этого работает, если вы можете получить высоту веб-просмотра перед загрузкой.

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