Question

我的应用程序中存在一个非常奇怪的渲染错误。输入屏幕应该显示标题，图像和作者姓名（标题视图）。但是view元素只有在滚动后才能显示。

<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.2更新到0.57.8，还没有尝试使用相同的代码降级到0.57.2，看看问题是否仍然存在。

是否可以解决此问题？

打开条目时： 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>

不滚动就无法呈现视图

1 个答案: