滑动到下一个屏幕（无限）

Question

我的应用程序中有一个日历部分，我希望能够在其中向右或向左滑动以转到下一天或前一天。

我知道您可以使用 React Navigation 中的 createMaterialTopTabNavigator 来做类似的事情，但我不确定它是否适用于这种特定情况（我会有无限数量的屏幕并且不会' 无法预定义它们）。

我还考虑过使用 react-native-gesture-handler 的 Swipeable 组件通过 left/right 滑动导航到 next/previous 日屏幕，但我不确定这是否是easiest/best 解决这个问题的方法。

Answer 1

如您所述，您可以使用 Tabs 或 Swipable。还有一些其他选项，例如使用 <ifaram> 或 <WebView> 以及使用网络 URL 而不是 RN 组件，但它可能很棘手且难以操作。

作为一个简单的解决方案，您可以使用 carousels 而不是使用 multi screen 定义导航。这很简单。假设您的屏幕是图片库中的图片，您可以滑动 left/right.

有许多个库，最好的库之一是：react-native-snap-carousle

看看它的例子：

import Carousel from 'react-native-snap-carousel';
 
export class MyCarousel extends Component {
 
    _renderItem = ({item, index}) => {
        return (
            <View style={styles.slide}>
                <Text style={styles.title}>{ item.title }</Text>
            </View>
        );
    }
 
    render () {
        return (
            <Carousel
              ref={(c) => { this._carousel = c; }}
              data={this.state.entries}
              renderItem={this._renderItem}
              sliderWidth={sliderWidth}
              itemWidth={itemWidth}
            />
        );
    }
}

因此您可以将 screen/page 作为 _renderItem 传递给 Carousel

滑动到下一个屏幕（无限）

Swipe to next screen (infinite)

swipe

react-native

react-navigation

react-native-gesture-handler