在堆栈导航器标签上单击时渲染屏幕
问题描述:
使用TabNavigator
制作了选项卡视图。这里是我使用的library。总计我有3个选项卡。所以初始选项卡加载&渲染罚款没有麻烦。但问题在于第三个标签。我在第三个标签组件中的每个方法中检查了console.log()
。每个方法都在执行,但不显示结果(显示空白屏幕),直到我与之交互。当我开始与它交互时,只有数据是重新渲染的(我认为是这样)。在堆栈导航器标签上单击时渲染屏幕
我该如何解决这个问题?任何帮助?
感谢
答
我用道具lazy
真正的配置标签导航解决它。以下是我修改的代码。现在正在工作。
const TabView = TabNavigator({
feed: { screen: Feed },
info: { screen: Info },
members: {screen: Members}
}, {
tabBarPosition: "top",
tabBarOptions: {
activeTintColor: "#4A90E2",
inactiveTintColor: "#4A4A4A",
style: {
backgroundColor: 'white',
height:56,
alignItems: 'center',
shadowColor: '#000000',
shadowOpacity: 0.1,
shadowRadius: 0,
shadowOffset: {
height: 2,
width: 1
}
},
tabStyle: {
height: 40,
},
labelStyle: {
fontSize:12,
fontFamily:'HelveticaNeue-Medium'
}
},
lazy:true
});
答
试试这个: 使每个标签的数据作为一个单独的组件和你的标签内分别导入。 例如:
<Tab1>
<tab1 components/>
</Tab1>
lazy:true意味着直到点击后才显示背景中的选项卡。懒惰:false,切换标签将立即。如果在最后一个选项卡上显示的是ListView或FlatList/SectionList,则可以尝试在ListView上设置removeClippedSubviews = {false},这可能有助于组件无法正确显示。 – hyb175