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>

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

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

Answer 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>}
/>

希望这会有所帮助！

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

1 个答案: