在不同标签之间滑动是平滑的,但标签的更改速度非常慢

时间:2016-08-06 08:07:50

标签: android android-viewpager react-native react-native-android react-native-scrollview

我在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>

我该如何解决这个问题?你能帮帮我解决一下吗?谢谢。

1 个答案:

答案 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>}
/>

希望这会有所帮助!