我在Android上,并在我的物理设备上进行测试。我正在使用react-native-scrollable-tab-view。我在ScrollableTabView
内有两个标签(关注和推荐)。
<View style={styles.container}>
<HeaderMain/>
<ScrollableTabView
tabBarPosition='overlayBottom'
tabBarUnderlineColor='#2ec76e'
tabBarBackgroundColor='white'
tabBarActiveTextColor='#2ec76e'
tabBarInactiveTextColor='#99e3b8'
scrollWithoutAnimation={true}
tabBarTextStyle={{fontFamily: 'Roboto', fontSize: 15, fontWeight: 'bold'}}>
<FollowingPostPage tabLabel="Following" />
<RecommendedPostPage tabLabel="Recommended" />
</ScrollableTabView>
</View>
在FollowPostPage中我有ScrollView
个帖子列表(每个帖子都有图片和一些文字)
export default class FollowingPostPage extends Component {
render() {
return(
<ScrollView style={styles.container}>
<PostCard/>
<PostCard/>
...
...
<PostCard/>
<View style={styles.toolbar_height}/>
</ScrollView>
)
}
}
在RecommendedPostPage内只有一个文本。
export default class RecommendedPostPage extends Component {
render() {
return(
<View style={{flex:1, backgroundColor: '#ecf0f1'}}>
<Text>I am from SuggestedPage!</Text>
</View>
)
}
}
标签之间的滑动是平滑的。但是,如果非常慢,则更改标签。
如果我按下推荐标签,或者我从关注推荐到推荐,则滑动是平滑的,并且一旦页面更改,标签也会更改。
但是,当我处于推荐状态时,按下“关注”标签或从“推荐”滑动到“关注”,滑动非常顺畅,但标签更改需要很长时间,因为您可以看到GIF from here:< / p>
我该如何解决这个问题?你能帮帮我解决一下吗?谢谢。
答案 0 :(得分:1)
当刷回&#34;推荐&#34;可能会发生一些事情。这导致动画'&#34;丢帧'#34; (在此处阅读:React-Native docs)。我会先用ListView替换您的ScrollView
,因为这样可以提供更好的效果
来自React-Native文档
ScrollView最适合呈现少量有限尺寸的东西。即使ScrollView当前未显示在屏幕上,也会呈现ScrollView的所有元素和视图。如果您有更多可以放在屏幕上的项目列表,则应使用ListView。
使用文档中的示例,它显示行的字符串,但您也可以使用对象!
ds.cloneWithRows([
{name: 'John'},
{name: 'Joel'},
{name: 'James'}
]);
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData.name}</Text>}
/>
希望这会有所帮助!