android - 在不同选项卡之间滑动很流畅，但选项卡的更改非常慢

Question

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

在 FollowingPostPage 中，我有一个 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 :

我该如何解决这个问题？你能帮我弄清楚吗？谢谢。

Answer 1

当滑回“推荐”时可能发生了什么导致动画“掉帧”(在这里阅读:React-Native docs)。我会先用 ListView 替换你的 ScrollView因为这应该会给你更好的表现

来自 React-Native 文档

ScrollView works best to present a small amount of things of a limited size. All the elements and views of a ScrollView are rendered, even if they are not currently shown on the screen. If you have a long list of more items that can fit on the screen, you should use a ListView instead.

文档中的示例显示了行的字符串，但您也可以使用对象!

ds.cloneWithRows([
    {name: 'John'},
    {name: 'Joel'},
    {name: 'James'}
]);

<ListView
    dataSource={this.state.dataSource}
    renderRow={(rowData) => <Text>{rowData.name}</Text>}
/>

希望这会有所帮助!