2

私はアンドロイドを使用しており、物理デバイスでテストしています。私はreact-native-scrollable-tab-viewを使用しています。内部には 2 つのタブがあります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>

次のPostPage内には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 docs )。これによりパフォーマンスが向上するはずなのでScrollView、最初にListViewに置き換えます

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 に答える