2

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

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

4

1 回答 1

1

滑回“推荐”时可能会发生一些事情，导致动画“丢帧”（在此处阅读：React-Native 文档）。我会首先用 ListView 替换你ScrollView，因为这应该会给你更好的性能

来自 React-Native 文档

ScrollView 最适合展示少量大小有限的东西。ScrollView 的所有元素和视图都会被渲染，即使它们当前没有显示在屏幕上。如果您有一长串可以在屏幕上显示的更多项目，则应使用 ListView 代替。

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

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

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

希望这会有所帮助！

于 2016-08-06T12:00:01.213 回答