视图在不滚动的情况下无法呈现
视图在不滚动的情况下无法呈现
提问于 2018-12-20 00:15:50
我的应用程序中有一个非常奇怪的渲染错误。输入屏幕应该显示标题、图像和作者姓名(标题视图)。但是视图元素只有在滚动之后才会显示。
<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>我试着找出bug的原因，并将其与应用程序的旧代码进行比较，但我并没有真正改变任何东西。我已经将RN从0.57.2更新到0.57.8，如果我用相同的代码降级到0.57.2，我还没有尝试，看看问题是否仍然发生。
有没有办法纠正这种行为？
打开入口时：https://imgur.com/AOVTwxJ
提前感谢您的帮助
//添加样式表头
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,
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-20 08:05:36
我通过在它周围包装一个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>我不知道为什么这个解决了它，但是glade它现在起作用了。如果有人能解释一下那就太酷了。
//小打印机
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53855186
复制相关文章
相似问题
腾讯云开发者
