Вид не отображается без прокрутки

Question

У меня действительно странная ошибка рендеринга в моем приложении.Предполагается, что на экране ввода отображаются заголовок, изображение и имя автора (вид заголовка).Но элемент просмотра отображается только после прокрутки.

<View style={this.state.baseStyles.body}>
<View style={headerStyles.header}>
    <View style={headerStyles.headerSide}>
        <FastImage
            style={headerStyles.headerImage}
            source={{uri: imgUrl}}
            />
    </View>
    <View style={headerStyles.headerBody}>
            <Text style={headerStyles.headerTextTitle}>{entry["title"]}</Text>
            <Text style={headerStyles.headerTextSubtitle}>{datetime} von {entry["author"]}</Text>
    </View>
</View>
<View style={this.state.baseStyles.body}>
    <WebView
    style={styles.WebViewStyle}  
    javaScriptEnabled={true}
    domStorageEnabled={false}
    source={{ html: page}}
    ref={(ref) => { this.webview = ref; }}
    onNavigationStateChange={(event) => {
        this.onWebviewPressLink(event);
    }}
    />
</View>    
</View>

Я попытался найти причину ошибки, просмотрев и сравнив ее со старым кодом приложения, но я ничего не изменил.Я обновил RN до 0.57.8 с 0.57.2, я еще не пробовал, понизил ли я его до 0.57.2 с тем же кодом и посмотрю, не возникает ли проблема.

Есть ли способ исправитьэто поведение?

При открытии Entry: https://imgur.com/AOVTwxJ

После прокрутки: https://imgur.com/6eFHg21

Заранее благодарен за любую помощь

// добавлены стилиЗаголовок

view:{
    flex: 1,
    flexDirection:'column',
    backgroundColor:theme.background.secondary
},
headerHighlight: {
    flex:1,    
},
header: {
    padding:10,
    paddingBottom:3,
    flexDirection:'row',    
    backgroundColor: theme.header.background,
    paddingVertical: 4,
    paddingHorizontal: 4,
},
headerSide:{
    paddingHorizontal:8,
},
headerImage:{
    width: 70,
    height: 70,
    marginVertical: 4, 
    borderRadius: 3,
},
headerBody:{
    flex:1,
    flexDirection:'column'
},
headerTextTitle: {
    fontSize: 19,
    fontWeight: '200',
    color: theme.header.text.primary,
    marginTop: 8,
    marginRight: 5
},
headerTextSubtitle: {
    fontSize: 12,
    color: theme.header.text.secondary
},

this.state.baseStyles.body:

body: {
    flex: 1,
    flexDirection:'column',
    backgroundColor:theme.background.secondary
},

styles.WebViewStyle:

{
justifyContent: 'center',
alignItems: 'center',
flex:1,
}

Answer 1

Я исправляю это, оборачивая ScrollView вокруг него.

<ScrollView contentContainerStyle={{flex:1}}>
    <View style={this.state.baseStyles.body}>
        <WebView
        style={styles.WebViewStyle}  
        javaScriptEnabled={true}
        domStorageEnabled={false}
        source={{ html: page}}
        ref={(ref) => { this.webview = ref; }}
        onNavigationStateChange={(event) => {
            //console.log(event);
            //console.log("Event URL"+event.url);
            this.onWebviewPressLink(event);
        }}
        />
    </View>
</ScrollView>

Я не знаю, почему это решает, но работает сейчас.Было бы круто, если бы кто-то мог это объяснить.

// Немного милее

<ScrollView style={this.state.baseStyles.body} contentContainerStyle={{flex:1}}>
    <WebView
    style={styles.WebViewStyle}  
    javaScriptEnabled={true}
    domStorageEnabled={false}
    source={{ html: page}}
    ref={(ref) => { this.webview = ref; }}
    onNavigationStateChange={(event) => {
        //console.log(event);
        //console.log("Event URL"+event.url);
        this.onWebviewPressLink(event);
    }}
    />
</ScrollView>